/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ���ú���������ʽ */
.page[b-c9siwwp1u5], .sidebar[b-c9siwwp1u5], .top-row[b-c9siwwp1u5] {
    display: none !important;
}

/* �������� */
.layout-container[b-c9siwwp1u5] {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* �ִ��������� - ����MudBlazorЧ�� */
.modern-navbar[b-c9siwwp1u5] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.modern-navbar.scrolled[b-c9siwwp1u5] {
    background: rgba(255, 255, 255, 0.99);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-bottom-color: rgba(0, 0, 0, 0.1);
}

.modern-navbar.hidden[b-c9siwwp1u5] {
    transform: translateY(-100%);
}

.navbar-container[b-c9siwwp1u5] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 32px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ��Ҷѧ��Ʒ��Logo���� */
.navbar-brand[b-c9siwwp1u5] {
    display: flex;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    padding: 8px 12px;
    border-radius: 12px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
}

.navbar-brand:hover[b-c9siwwp1u5] {
    background: rgba(25, 118, 210, 0.04);
    transform: translateY(-1px);
}

.brand-logo[b-c9siwwp1u5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ��ҶLogo SVG��Ч���� */
.logo-container[b-c9siwwp1u5] {
    position: relative;
    width: 40px;
    height: 40px;
}

.leaf-icon[b-c9siwwp1u5] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.leaf-svg[b-c9siwwp1u5] {
    width: 32px;
    height: 32px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.leaf-path[b-c9siwwp1u5] {
    fill: #1976d2;
    stroke: none;
    transition: all 0.4s ease;
    transform-origin: center;
    animation: leaf-breathe-b-c9siwwp1u5 4s ease-in-out infinite;
}

.stem-path[b-c9siwwp1u5] {
    stroke: #4caf50;
    stroke-width: 2;
    fill: none;
    stroke-linecap: round;
    transition: all 0.3s ease;
}

.growth-dot[b-c9siwwp1u5] {
    fill: #ff9800;
    opacity: 0;
    transition: all 0.3s ease;
    animation: growth-sparkle-b-c9siwwp1u5 3s ease-in-out infinite;
}

.growth-dot.dot1[b-c9siwwp1u5] {
    animation-delay: 0s;
}

.growth-dot.dot2[b-c9siwwp1u5] {
    animation-delay: 1s;
}

.growth-dot.dot3[b-c9siwwp1u5] {
    animation-delay: 2s;
}

/* Logo�������� */
@keyframes leaf-breathe-b-c9siwwp1u5 {
    0%, 100% { 
        transform: scale(1);
        filter: hue-rotate(0deg);
    }
    50% { 
        transform: scale(1.05);
        filter: hue-rotate(10deg);
    }
}

/* �ɳ�����˸���� */
@keyframes growth-sparkle-b-c9siwwp1u5 {
    0%, 70%, 100% { 
        opacity: 0;
        transform: scale(0);
    }
    35% { 
        opacity: 1;
        transform: scale(1.2);
    }
}

/* ��ͣʱ��Logo��Ч */
.navbar-brand:hover .leaf-path[b-c9siwwp1u5] {
    fill: #1565c0;
    transform: rotate(5deg) scale(1.1);
    filter: drop-shadow(0 2px 8px rgba(25, 118, 210, 0.3));
}

.navbar-brand:hover .stem-path[b-c9siwwp1u5] {
    stroke: #388e3c;
    stroke-width: 3;
}

.navbar-brand:hover .growth-dot[b-c9siwwp1u5] {
    opacity: 1;
    animation-duration: 1s;
}

/* ����ʱ��Logo��Ч */
.leaf-animate .leaf-path[b-c9siwwp1u5] {
    animation: leaf-click-spin-b-c9siwwp1u5 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.leaf-animate .growth-dot[b-c9siwwp1u5] {
    animation: growth-burst-b-c9siwwp1u5 1.2s ease-out;
}

@keyframes leaf-click-spin-b-c9siwwp1u5 {
    0% { 
        transform: rotate(0deg) scale(1);
        fill: #1976d2;
    }
    50% { 
        transform: rotate(180deg) scale(1.3);
        fill: #4caf50;
        filter: drop-shadow(0 4px 16px rgba(76, 175, 80, 0.4));
    }
    100% { 
        transform: rotate(360deg) scale(1);
        fill: #1976d2;
    }
}

@keyframes growth-burst-b-c9siwwp1u5 {
    0% { 
        opacity: 0;
        transform: scale(0);
    }
    50% { 
        opacity: 1;
        transform: scale(2);
    }
    100% { 
        opacity: 0;
        transform: scale(0);
    }
}

/* Ʒ��������ʽ */
.brand-text-container[b-c9siwwp1u5] {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.brand-text[b-c9siwwp1u5] {
    font-weight: 700;
    color: #1976d2;
    margin: 0;
    font-size: 1.5rem;
    letter-spacing: -0.5px;
    transition: all 0.3s ease;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

.brand-subtitle[b-c9siwwp1u5] {
    font-size: 0.7rem;
    color: #666;
    font-weight: 400;
    margin-top: 1px;
    opacity: 0.8;
    transition: all 0.3s ease;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-family: 'SF Pro Text', 'Segoe UI', sans-serif;
}

.navbar-brand:hover .brand-text[b-c9siwwp1u5] {
    color: #1565c0;
    transform: translateX(2px);
}

.navbar-brand:hover .brand-subtitle[b-c9siwwp1u5] {
    color: #4caf50;
    opacity: 1;
    transform: translateX(2px);
}

/* Ʒ�Ƶ�����Ч */
.navbar-brand.brand-clicked[b-c9siwwp1u5] {
    animation: brand-pulse-b-c9siwwp1u5 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes brand-pulse-b-c9siwwp1u5 {
    0% { transform: scale(1); }
    50% { 
        transform: scale(1.02);
        box-shadow: 0 0 0 8px rgba(25, 118, 210, 0.15);
        background: rgba(25, 118, 210, 0.08);
    }
    100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(25, 118, 210, 0);
    }
}

/* �����˵����˵� - ����MudBlazorЧ�� */
.desktop-nav[b-c9siwwp1u5] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: center;
    max-width: 600px;
}

.desktop-nav[b-c9siwwp1u5]  .mud-button-root {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    white-space: nowrap;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.desktop-nav[b-c9siwwp1u5]  .nav-item {
    position: relative;
    color: #555 !important;
    font-weight: 500;
    text-transform: none;
    padding: 8px 16px;
    font-size: 0.95rem;
    letter-spacing: 0.2px;
    border-radius: 6px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent !important;
    min-height: 36px;
}

.desktop-nav[b-c9siwwp1u5]  .nav-item:hover {
    background: rgba(25, 118, 210, 0.06) !important;
    color: #1976d2 !important;
    transform: translateY(-1px);
}

/* ����״̬��ʽ */
.desktop-nav[b-c9siwwp1u5]  .nav-item.active,
.desktop-nav[b-c9siwwp1u5]  .nav-item[aria-current="page"] {
    background: rgba(25, 118, 210, 0.1) !important;
    color: #1976d2 !important;
    font-weight: 600;
}

/* MudMenu �����˵���ʽ */
.desktop-nav[b-c9siwwp1u5]  .nav-dropdown .mud-menu {
    display: inline-block;
}

.desktop-nav[b-c9siwwp1u5]  .nav-dropdown .mud-menu-activator {
    display: inline-flex !important;
}

.desktop-nav[b-c9siwwp1u5]  .nav-dropdown .mud-button-root {
    display: inline-flex !important;
    flex-direction: row !important;
}

/* �Ҳ������� */
.navbar-actions[b-c9siwwp1u5] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.action-btn[b-c9siwwp1u5] {
    border-radius: 50%;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
}

.action-btn:hover[b-c9siwwp1u5] {
    background: rgba(25, 118, 210, 0.08);
    transform: scale(1.05);
}

.notification-btn[b-c9siwwp1u5]  .mud-badge {
    animation: notification-pulse-b-c9siwwp1u5 2s infinite;
}

@keyframes notification-pulse-b-c9siwwp1u5 {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.user-btn[b-c9siwwp1u5] {
    border-radius: 20px;
    padding: 6px 16px;
    background: rgba(25, 118, 210, 0.04);
    border: 1px solid rgba(25, 118, 210, 0.15);
    transition: all 0.2s ease;
    font-weight: 500;
}

.user-btn:hover[b-c9siwwp1u5] {
    background: rgba(25, 118, 210, 0.08);
    border-color: rgba(25, 118, 210, 0.25);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.15);
}

.login-btn[b-c9siwwp1u5] {
    border-radius: 20px;
    padding: 8px 24px;
    font-weight: 600;
    text-transform: none;
    background: #1976d2;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.25);
    transition: all 0.2s ease;
}

.login-btn:hover[b-c9siwwp1u5] {
    background: #1565c0;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(25, 118, 210, 0.35);
}

/* �ƶ��˲˵���ť - ֻ��С��ʱ��ʾ */
.mobile-menu-btn[b-c9siwwp1u5] {
    display: none;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    transition: all 0.2s ease;
}

.mobile-menu-btn:hover[b-c9siwwp1u5] {
    background: rgba(25, 118, 210, 0.08);
}

/* �ƶ��˲˵� */
.mobile-menu[b-c9siwwp1u5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1100;
    visibility: hidden;
    transition: visibility 0.3s ease;
}

.mobile-menu.open[b-c9siwwp1u5] {
    visibility: visible;
}

.mobile-menu-overlay[b-c9siwwp1u5] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mobile-menu.open .mobile-menu-overlay[b-c9siwwp1u5] {
    opacity: 1;
}

.mobile-menu-content[b-c9siwwp1u5] {
    position: absolute;
    top: 0;
    right: 0;
    width: 320px;
    max-width: 85vw;
    height: 100%;
    background: white;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.mobile-menu.open .mobile-menu-content[b-c9siwwp1u5] {
    transform: translateX(0);
}

.mobile-menu-header[b-c9siwwp1u5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(25, 118, 210, 0.02);
}

.mobile-brand[b-c9siwwp1u5] {
    display: flex;
    align-items: center;
}

.leaf-icon-small[b-c9siwwp1u5] {
    width: 24px;
    height: 24px;
}

.leaf-svg-small[b-c9siwwp1u5] {
    width: 100%;
    height: 100%;
}

.leaf-path-small[b-c9siwwp1u5] {
    fill: #1976d2;
    animation: leaf-breathe-b-c9siwwp1u5 4s ease-in-out infinite;
}

.mobile-menu-items[b-c9siwwp1u5] {
    padding: 16px 0;
}

.mobile-menu-items[b-c9siwwp1u5]  .mud-nav-menu {
    padding: 0 16px;
}

.mobile-menu-items[b-c9siwwp1u5]  .mud-nav-link {
    margin: 4px 0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-menu-items[b-c9siwwp1u5]  .mud-nav-link:hover {
    background: rgba(25, 118, 210, 0.08);
    transform: translateX(4px);
}

/* ���������� */
.main-content[b-c9siwwp1u5] {
    flex: 1;
    margin-top: 64px;
    min-height: calc(100vh - 64px);
}

/* ��Ӧʽ���� */
@media (max-width: 768px) {
    .navbar-container[b-c9siwwp1u5] {
        padding: 0 16px;
        height: 56px;
    }
    
    .desktop-nav[b-c9siwwp1u5] {
        display: none !important;
    }
    
    .mobile-menu-btn[b-c9siwwp1u5] {
        display: flex !important;
    }
    
    .navbar-actions .login-btn[b-c9siwwp1u5] {
        padding: 6px 16px;
        font-size: 0.9rem;
    }
    
    .brand-subtitle[b-c9siwwp1u5] {
        display: none;
    }
    
    .brand-text[b-c9siwwp1u5] {
        font-size: 1.3rem;
    }
    
    .main-content[b-c9siwwp1u5] {
        margin-top: 56px;
        min-height: calc(100vh - 56px);
    }
}

@media (max-width: 480px) {
    .mobile-menu-content[b-c9siwwp1u5] {
        width: 100%;
        max-width: 100%;
    }
    
    .navbar-actions .login-btn[b-c9siwwp1u5] {
        display: none;
    }
}

/* ȷ�������豸�ϵ����˵�ˮƽ��ʾ */
@media (min-width: 769px) {
    .desktop-nav[b-c9siwwp1u5] {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }
    
    .mobile-menu-btn[b-c9siwwp1u5] {
        display: none !important;
    }
    
    .desktop-nav > *[b-c9siwwp1u5] {
        display: inline-flex !important;
    }
    
    .desktop-nav[b-c9siwwp1u5]  .mud-button-root,
    .desktop-nav[b-c9siwwp1u5]  .mud-menu {
        display: inline-flex !important;
        flex-direction: row !important;
    }
}

/* ƽ������ */
html[b-c9siwwp1u5] {
    scroll-behavior: smooth;
}

/* ��ɫģʽ֧�� */
@media (prefers-color-scheme: dark) {
    .modern-navbar[b-c9siwwp1u5] {
        background: rgba(18, 18, 18, 0.98);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    
    .modern-navbar.scrolled[b-c9siwwp1u5] {
        background: rgba(18, 18, 18, 0.99);
    }
    
    .mobile-menu-content[b-c9siwwp1u5] {
        background: #1a1a1a;
        color: white;
    }
    
    .mobile-menu-header[b-c9siwwp1u5] {
        background: rgba(255, 255, 255, 0.02);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    
    .brand-subtitle[b-c9siwwp1u5] {
        color: #ccc;
    }
    
    .leaf-path[b-c9siwwp1u5],
    .leaf-path-small[b-c9siwwp1u5] {
        fill: #64b5f6;
    }
}

/* ���ϰ������Ż� */
@media (prefers-reduced-motion: reduce) {
    *[b-c9siwwp1u5] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .leaf-path[b-c9siwwp1u5],
    .leaf-path-small[b-c9siwwp1u5],
    .growth-dot[b-c9siwwp1u5] {
        animation: none !important;
    }
}

/* ȷ�� Blazor ���� UI �ɼ��� */
#blazor-error-ui[b-c9siwwp1u5] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    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-c9siwwp1u5] {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* 用户菜单样式 */
.user-menu[b-c9siwwp1u5] {
    border-radius: 12px;
}

.user-info-trigger[b-c9siwwp1u5] {
    cursor: pointer;
    border-radius: 12px;
    padding: 4px 8px;
    transition: all 0.2s ease;
}

.user-info-trigger:hover[b-c9siwwp1u5] {
    background: rgba(25, 118, 210, 0.08);
}

.user-avatar-trigger[b-c9siwwp1u5] {
    border: 2px solid rgba(25, 118, 210, 0.2);
    transition: all 0.2s ease;
}

.user-avatar-trigger:hover[b-c9siwwp1u5] {
    border-color: rgba(25, 118, 210, 0.4);
    transform: scale(1.05);
}

.user-name-trigger[b-c9siwwp1u5] {
    font-weight: 500;
    color: #333;
    font-size: 0.875rem;
}

.dropdown-icon[b-c9siwwp1u5] {
    transition: transform 0.2s ease;
}

.user-menu[aria-expanded="true"] .dropdown-icon[b-c9siwwp1u5] {
    transform: rotate(180deg);
}

.notification-btn[b-c9siwwp1u5] {
    margin-left: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.notification-btn:hover[b-c9siwwp1u5] {
    background: rgba(25, 118, 210, 0.08);
    transform: scale(1.1);
}

/* 菜单项样式 */
.user-menu[b-c9siwwp1u5]  .mud-menu-item {
    border-radius: 8px;
    margin: 4px 8px;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.user-menu[b-c9siwwp1u5]  .mud-menu-item:hover {
    background: rgba(25, 118, 210, 0.08);
    transform: translateX(4px);
}

.user-menu[b-c9siwwp1u5]  .mud-menu-item:last-child {
    color: #ef4444;
}

.user-menu[b-c9siwwp1u5]  .mud-menu-item:last-child:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

.user-menu[b-c9siwwp1u5]  .mud-divider {
    margin: 8px 0;
}

/* 动画优化 */
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-pf9vvfbejq] {
    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-pf9vvfbejq] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-pf9vvfbejq] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-pf9vvfbejq] {
    font-size: 1.1rem;
}

.bi[b-pf9vvfbejq] {
    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-pf9vvfbejq] {
    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-pf9vvfbejq] {
    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-pf9vvfbejq] {
    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-pf9vvfbejq] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-pf9vvfbejq] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-pf9vvfbejq] {
        padding-bottom: 1rem;
    }

    .nav-item[b-pf9vvfbejq]  .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-pf9vvfbejq]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-pf9vvfbejq]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-pf9vvfbejq] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-pf9vvfbejq] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-pf9vvfbejq] {
        display: none;
    }

    .nav-scrollable[b-pf9vvfbejq] {
        /* 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/TopNavMenu.razor.rz.scp.css */
.top-nav-menu[b-tsehpocl3l] {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 100%;
    padding: 0 8px;
}

[b-tsehpocl3l] .nav-button {
    text-transform: none !important;
    border-radius: 12px !important;
    padding: 10px 20px !important;
    font-weight: 500 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    white-space: nowrap;
    min-width: auto;
    position: relative;
    overflow: hidden;
}

[b-tsehpocl3l] .nav-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(25, 118, 210, 0.1), transparent);
    transition: left 0.5s ease;
}

[b-tsehpocl3l] .nav-button:hover::before {
    left: 100%;
}

[b-tsehpocl3l] .nav-button:hover {
    background-color: rgba(25, 118, 210, 0.08) !important;
    color: #1976d2 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.15);
}

[b-tsehpocl3l] .nav-button.active {
    background-color: rgba(25, 118, 210, 0.12) !important;
    color: #1976d2 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(25, 118, 210, 0.2);
}

[b-tsehpocl3l] .nav-button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background: linear-gradient(90deg, #1976d2, #42a5f5);
    border-radius: 2px;
}

[b-tsehpocl3l] .tools-dropdown {
    text-transform: none !important;
    border-radius: 12px !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

[b-tsehpocl3l] .tools-dropdown:hover {
    background-color: rgba(25, 118, 210, 0.08) !important;
    color: #1976d2 !important;
}

/* �����˵�����ʽ */
[b-tsehpocl3l] .mud-menu-item {
    border-radius: 8px !important;
    margin: 2px 0 !important;
    transition: all 0.2s ease !important;
}

[b-tsehpocl3l] .mud-menu-item:hover {
    background-color: rgba(25, 118, 210, 0.08) !important;
    transform: translateX(4px);
}

/* ��Ӧʽ���� */
@media (max-width: 1200px) {
    .top-nav-menu[b-tsehpocl3l] {
        gap: 2px;
    }
    
    [b-tsehpocl3l] .nav-button {
        padding: 8px 16px !important;
        font-size: 0.875rem !important;
    }
}

@media (max-width: 1000px) {
    [b-tsehpocl3l] .nav-button .mud-button-label {
        display: none;
    }
    
    [b-tsehpocl3l] .nav-button {
        min-width: 48px;
        padding: 8px !important;
        border-radius: 50% !important;
    }

    [b-tsehpocl3l] .nav-button.active::after {
        display: none;
    }

    [b-tsehpocl3l] .tools-dropdown .mud-button-label {
        display: none;
    }
}

/* ƽ������ */
@keyframes slideIn-b-tsehpocl3l {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top-nav-menu[b-tsehpocl3l] {
    animation: slideIn-b-tsehpocl3l 0.3s ease-out;
}
/* /Components/Pages/About/AboutUs.razor.rz.scp.css */
.about-us-container[b-8g3ycitg4m] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
}

/* Hero Section */
.hero-section[b-8g3ycitg4m] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));
    padding: 80px 0;
    text-align: center;
    color: white;
    position: relative;
    overflow: hidden;
}

.hero-section[b-8g3ycitg4m]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    animation: float-b-8g3ycitg4m 20s ease-in-out infinite;
}

@keyframes float-b-8g3ycitg4m {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.hero-content[b-8g3ycitg4m] {
    position: relative;
    z-index: 1;
}

.hero-title[b-8g3ycitg4m] {
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    animation: fadeInUp-b-8g3ycitg4m 1s ease-out;
}

.hero-subtitle[b-8g3ycitg4m] {
    font-size: 1.5rem;
    font-weight: 300;
    margin: 0 0 2rem 0;
    opacity: 0.9;
    animation: fadeInUp-b-8g3ycitg4m 1s ease-out 0.2s both;
}

.hero-divider[b-8g3ycitg4m] {
    width: 100px;
    height: 4px;
    background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
    margin: 0 auto;
    border-radius: 2px;
    animation: fadeInUp-b-8g3ycitg4m 1s ease-out 0.4s both;
}

@keyframes fadeInUp-b-8g3ycitg4m {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Container */
.container[b-8g3ycitg4m] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Sections */
.company-intro[b-8g3ycitg4m], .features-section[b-8g3ycitg4m] {
    padding: 80px 0;
    background: white;
}

.features-section[b-8g3ycitg4m] {
    background: #f8f9fa;
}

.section-header[b-8g3ycitg4m] {
    text-align: center;
    margin-bottom: 60px;
}

.section-title[b-8g3ycitg4m] {
    font-size: 2.5rem;
    color: #2c3e50;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.title-icon[b-8g3ycitg4m] {
    font-size: 2rem;
}

/* Company Introduction */
.intro-content[b-8g3ycitg4m] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    align-items: center;
}

.intro-text[b-8g3ycitg4m] {
    max-width: 100%;
}

.lead-text[b-8g3ycitg4m] {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #2c3e50;
    margin-bottom: 30px;
}

.description-text[b-8g3ycitg4m] {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #5a6c7d;
    margin: 0;
}

.stats-grid[b-8g3ycitg4m] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

.stat-item[b-8g3ycitg4m] {
    text-align: center;
    padding: 30px 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 20px;
    color: white;
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.stat-item:hover[b-8g3ycitg4m] {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
}

.stat-number[b-8g3ycitg4m] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.stat-label[b-8g3ycitg4m] {
    font-size: 1rem;
    opacity: 0.9;
}

/* Features Grid */
.features-grid[b-8g3ycitg4m] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card[b-8g3ycitg4m] {
    background: white;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-card[b-8g3ycitg4m]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.feature-card:hover[b-8g3ycitg4m] {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

.feature-card:hover[b-8g3ycitg4m]::before {
    transform: scaleX(1);
}

.feature-icon[b-8g3ycitg4m] {
    font-size: 3rem;
    margin-bottom: 20px;
    display: block;
}

.feature-title[b-8g3ycitg4m] {
    font-size: 1.5rem;
    color: #2c3e50;
    margin: 0 0 20px 0;
    font-weight: 600;
}

.feature-description[b-8g3ycitg4m] {
    font-size: 1rem;
    line-height: 1.6;
    color: #5a6c7d;
    margin: 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-title[b-8g3ycitg4m] {
        font-size: 2.5rem;
    }
    
    .hero-subtitle[b-8g3ycitg4m] {
        font-size: 1.2rem;
    }
    
    .section-title[b-8g3ycitg4m] {
        font-size: 2rem;
        flex-direction: column;
        gap: 10px;
    }
    
    .intro-content[b-8g3ycitg4m] {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .stats-grid[b-8g3ycitg4m] {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    
    .stat-item[b-8g3ycitg4m] {
        padding: 20px 10px;
    }
    
    .stat-number[b-8g3ycitg4m] {
        font-size: 1.8rem;
    }
    
    .features-grid[b-8g3ycitg4m] {
        grid-template-columns: 1fr;
    }
    
    .company-intro[b-8g3ycitg4m], .features-section[b-8g3ycitg4m] {
        padding: 60px 0;
    }
}

@media (max-width: 480px) {
    .stats-grid[b-8g3ycitg4m] {
        grid-template-columns: 1fr;
    }
    
    .hero-section[b-8g3ycitg4m] {
        padding: 60px 0;
    }
}
/* /Components/Pages/Admin/AdminDashboard.razor.rz.scp.css */
/* ===================================
   AdminDashboard 样式文件
   现代化扁平设计风格
   =================================== */

/* 页面容器 */
.admin-dashboard[b-ci9y5ql6o1] {
    padding: 24px;
    background: var(--bg-primary, #f5f7fa);
    min-height: 100vh;
}

/* 加载状态 */
.loading-container[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 20px;
}

.loading-spinner[b-ci9y5ql6o1] {
    width: 50px;
    height: 50px;
    border: 4px solid var(--border-color, #e2e8f0);
    border-top-color: var(--primary-color, #667eea);
    border-radius: 50%;
    animation: spin-b-ci9y5ql6o1 1s linear infinite;
}

@keyframes spin-b-ci9y5ql6o1 {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-ci9y5ql6o1] {
    color: var(--text-secondary, #64748b);
    font-size: 16px;
}

/* 错误状态 */
.error-container[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    gap: 16px;
    text-align: center;
}

.error-icon[b-ci9y5ql6o1] {
    font-size: 48px;
}

.error-container h3[b-ci9y5ql6o1] {
    color: var(--text-primary, #1e293b);
    margin: 0;
    font-size: 24px;
}

.error-container p[b-ci9y5ql6o1] {
    color: var(--text-secondary, #64748b);
    margin: 0;
}

.btn-retry[b-ci9y5ql6o1] {
    margin-top: 16px;
    padding: 10px 24px;
    background: var(--primary-color, #667eea);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-retry:hover[b-ci9y5ql6o1] {
    background: var(--secondary-color, #764ba2);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* 页面标题 */
.dashboard-header[b-ci9y5ql6o1] {
    margin-bottom: 24px;
}

.page-title[b-ci9y5ql6o1] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0 0 8px 0;
}

.page-subtitle[b-ci9y5ql6o1] {
    font-size: 14px;
    color: var(--text-tertiary, #94a3b8);
    margin: 0;
}

/* KPI统计卡片网格 (5列) */
.stats-grid[b-ci9y5ql6o1] {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* 统计卡片 */
.stat-card[b-ci9y5ql6o1] {
    background: white;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    position: relative; /* 用于刷新按钮定位 */
}

.stat-card:hover[b-ci9y5ql6o1] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* 刷新按钮样式 */
.stat-refresh-btn[b-ci9y5ql6o1] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--border-light, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.8) translateY(-4px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10;
    color: var(--text-secondary, #64748b);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-refresh-btn:hover[b-ci9y5ql6o1] {
    background: linear-gradient(135deg, var(--primary-color, #667eea), var(--secondary-color, #764ba2));
    color: white;
    border-color: transparent;
    transform: scale(1) translateY(0) rotate(180deg);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.stat-refresh-btn:active[b-ci9y5ql6o1] {
    transform: scale(0.95) translateY(0) rotate(180deg);
}

.stat-card:hover .stat-refresh-btn[b-ci9y5ql6o1] {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateY(0);
}

.stat-refresh-btn svg[b-ci9y5ql6o1] {
    width: 16px;
    height: 16px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-refresh-btn:active svg[b-ci9y5ql6o1] {
    transform: rotate(360deg);
}

/* 旋转动画 */
@keyframes rotate-refresh-b-ci9y5ql6o1 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.stat-refresh-btn.rotating svg[b-ci9y5ql6o1] {
    animation: rotate-refresh-b-ci9y5ql6o1 1s linear infinite;
}

.stat-refresh-btn.rotating[b-ci9y5ql6o1] {
    pointer-events: none; /* 旋转时禁止再次点击 */
}

/* 普通卡片主内容 */
.stat-card:not(.stat-card-expandable)[b-ci9y5ql6o1] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

/* 可展开卡片布局 */
.stat-card-expandable[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    align-items: stretch; /* 确保子元素不居中 */
    gap: 0;
    cursor: pointer;
}

/* 添加悬停提示图标 */
.stat-card-expandable[b-ci9y5ql6o1]::after {
    content: '⋯';
    position: absolute;
    bottom: 12px;
    right: 16px;
    font-size: 20px;
    color: var(--text-tertiary, #94a3b8);
    opacity: 0.4;
    transition: all 0.3s ease;
    font-weight: bold;
    letter-spacing: 2px;
    z-index: 5;
}

.stat-card-expandable:hover[b-ci9y5ql6o1]::after {
    opacity: 0;
    transform: translateY(-5px);
}

/* 展开卡片悬停时，刷新按钮显示优先级更高 */
.stat-card-expandable:hover .stat-refresh-btn[b-ci9y5ql6o1] {
    z-index: 15;
}

/* 可展开卡片的主内容区域 */
.stat-main-content[b-ci9y5ql6o1] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    width: 100%; /* 确保占满宽度 */
}

/* 展开内容区域 - 默认隐藏，悬停显示 */
.stat-expand-content[b-ci9y5ql6o1] {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0;
    margin-top: 0;
    border-top: 1px solid transparent;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card-expandable:hover .stat-expand-content[b-ci9y5ql6o1] {
    max-height: 200px;
    opacity: 1;
    padding-top: 16px;
    margin-top: 16px;
    border-top-color: var(--border-light, #e2e8f0);
}

/* 展开项样式 */
.expand-item[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.03), rgba(118, 75, 162, 0.03));
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.expand-item:last-child[b-ci9y5ql6o1] {
    margin-bottom: 0;
}

.expand-item:hover[b-ci9y5ql6o1] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08), rgba(118, 75, 162, 0.08));
    transform: translateX(4px);
}

.expand-icon[b-ci9y5ql6o1] {
    font-size: 16px;
    flex-shrink: 0;
    opacity: 0.9;
}

.expand-label[b-ci9y5ql6o1] {
    font-size: 13px;
    color: var(--text-secondary, #64748b);
    font-weight: 500;
    flex: 1;
}

.expand-value[b-ci9y5ql6o1] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;
    letter-spacing: -0.01em;
}

/* 全宽展开项（如正确率） */
.expand-item-full[b-ci9y5ql6o1] {
    justify-content: space-between;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
    padding: 12px 16px;
}

.expand-value-highlight[b-ci9y5ql6o1] {
    font-size: 18px;
    font-weight: 700;
}

.stat-icon[b-ci9y5ql6o1] {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon svg[b-ci9y5ql6o1] {
    stroke: white;
}

.stat-content[b-ci9y5ql6o1] {
    flex: 1;
    min-width: 0;
}

.stat-label[b-ci9y5ql6o1] {
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
    margin-bottom: 4px;
    font-weight: 500;
}

.stat-value[b-ci9y5ql6o1] {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin-bottom: 4px;
    line-height: 1.2;
}

.stat-change[b-ci9y5ql6o1] {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-change.positive[b-ci9y5ql6o1] {
    color: var(--success-color, #10b981);
}

.stat-change.negative[b-ci9y5ql6o1] {
    color: var(--danger-color, #ef4444);
}

.stat-change .arrow[b-ci9y5ql6o1] {
    font-weight: bold;
}

/* 内容卡片 */
.content-card[b-ci9y5ql6o1] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
}

.chart-card[b-ci9y5ql6o1] {
    min-height: 380px;
}

.user-growth-full[b-ci9y5ql6o1] {
    grid-column: 1 / -1;
}

.card-header[b-ci9y5ql6o1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 16px;
}

.header-controls[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-select[b-ci9y5ql6o1] {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-primary, #1e293b);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 140px;
}

.filter-select:hover[b-ci9y5ql6o1] {
    border-color: #667eea;
    background: white;
}

.filter-select:focus[b-ci9y5ql6o1] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.card-title[b-ci9y5ql6o1] {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    margin: 0;
}

.card-subtitle[b-ci9y5ql6o1] {
    font-size: 13px;
    color: var(--text-tertiary, #94a3b8);
    margin: 4px 0 0 0;
}

.card-link[b-ci9y5ql6o1] {
    font-size: 13px;
    color: var(--primary-color, #667eea);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.card-link:hover[b-ci9y5ql6o1] {
    color: var(--secondary-color, #764ba2);
}

/* Tab切换 */
.chart-tabs[b-ci9y5ql6o1] {
    display: flex;
    gap: 8px;
}

.chart-tab[b-ci9y5ql6o1] {
    padding: 6px 16px;
    border: 1px solid var(--border-color, #e2e8f0);
    background: white;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary, #64748b);
}

.chart-tab:hover[b-ci9y5ql6o1] {
    border-color: var(--primary-color, #667eea);
    color: var(--primary-color, #667eea);
}

.chart-tab.active[b-ci9y5ql6o1] {
    background: var(--primary-color, #667eea);
    color: white;
    border-color: var(--primary-color, #667eea);
}

/* 图表容器 */
.chart-container[b-ci9y5ql6o1] {
    padding: 20px 0;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.empty-chart[b-ci9y5ql6o1] {
    color: var(--text-tertiary, #94a3b8);
    font-size: 14px;
}

/* 三列布局 */
.content-row-3[b-ci9y5ql6o1] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

/* 用户列表 */
.user-list[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.user-item[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
    transition: all 0.2s;
}

.user-item:hover[b-ci9y5ql6o1] {
    background: var(--bg-tertiary, #f1f5f9);
    transform: translateX(4px);
}

.user-avatar[b-ci9y5ql6o1] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--bg-tertiary, #f1f5f9);
}

.user-avatar img[b-ci9y5ql6o1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-ci9y5ql6o1] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-weight: 700;
    font-size: 16px;
}

.user-info[b-ci9y5ql6o1] {
    flex: 1;
    min-width: 0;
}

.user-name[b-ci9y5ql6o1] {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-phone[b-ci9y5ql6o1] {
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
}

.user-meta[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.user-time[b-ci9y5ql6o1] {
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
}

/* 订单列表 */
.order-list[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 4px;
}

/* 自定义滚动条样式 */
.order-list[b-ci9y5ql6o1]::-webkit-scrollbar {
    width: 6px;
}

.order-list[b-ci9y5ql6o1]::-webkit-scrollbar-track {
    background: transparent;
}

.order-list[b-ci9y5ql6o1]::-webkit-scrollbar-thumb {
    background: var(--border-color, #e5e7eb);
    border-radius: 3px;
    transition: background 0.2s ease;
}

.order-list[b-ci9y5ql6o1]::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary, #9ca3af);
}

/* 订单项 - 扁平化设计（与最新学员、热门课程风格一致） */
.order-item[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
    transition: all 0.2s;
    gap: 10px;
}

.order-item:hover[b-ci9y5ql6o1] {
    background: var(--bg-tertiary, #f1f5f9);
    transform: translateX(4px);
}

/* Ah区域：头部 - 订单编号（左）+ 订单状态（右） */
.order-header[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.order-no[b-ci9y5ql6o1] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    letter-spacing: 0.3px;
}

/* Ab区域：主体 - 商品图片（左）+ 商品信息（中）+ 支付金额（右） */
.order-body[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 左：商品图片 */
.order-image[b-ci9y5ql6o1] {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-tertiary, #f1f5f9);
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-image img[b-ci9y5ql6o1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.image-placeholder[b-ci9y5ql6o1] {
    font-size: 24px;
    opacity: 0.5;
}

/* 中：商品信息（垂直布局） */
.order-info[b-ci9y5ql6o1] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.goods-title[b-ci9y5ql6o1] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goods-details[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
}

.goods-spec[b-ci9y5ql6o1] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.goods-qty[b-ci9y5ql6o1] {
    flex-shrink: 0;
}

/* 右：支付金额 */
.order-amount[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.amount-value[b-ci9y5ql6o1] {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
}

/* Af区域：底部 - 用户ID（左）+ 订单类型（中）+ 订单时间（右） */
.order-footer[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--border-color, #e5e7eb);
    font-size: 12px;
}

.user-id[b-ci9y5ql6o1] {
    color: var(--text-tertiary, #94a3b8);
    font-family: 'Monaco', 'Consolas', 'Courier New', monospace;
    flex-shrink: 0;
}

.order-type-tag[b-ci9y5ql6o1] {
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    color: #667eea;
    flex-shrink: 0;
}

.order-time[b-ci9y5ql6o1] {
    color: var(--text-tertiary, #94a3b8);
    margin-left: auto;
    flex-shrink: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .order-item[b-ci9y5ql6o1] {
        gap: 8px;
        padding: 10px;
    }
    
    .order-header[b-ci9y5ql6o1] {
        padding-bottom: 8px;
    }
    
    .order-no[b-ci9y5ql6o1] {
        font-size: 12px;
    }
    
    .order-body[b-ci9y5ql6o1] {
        gap: 10px;
    }
    
    .order-image[b-ci9y5ql6o1] {
        width: 44px;
        height: 44px;
    }
    
    .image-placeholder[b-ci9y5ql6o1] {
        font-size: 20px;
    }
    
    .goods-title[b-ci9y5ql6o1] {
        font-size: 13px;
    }
    
    .goods-details[b-ci9y5ql6o1] {
        font-size: 11px;
    }
    
    .amount-value[b-ci9y5ql6o1] {
        font-size: 14px;
    }
    
    .order-footer[b-ci9y5ql6o1] {
        padding-top: 8px;
        font-size: 11px;
        flex-wrap: wrap;
    }
    
    .order-time[b-ci9y5ql6o1] {
        width: 100%;
        text-align: right;
        margin-left: 0;
        margin-top: 4px;
    }
}

/* 徽章 */
.badge[b-ci9y5ql6o1] {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.badge-primary[b-ci9y5ql6o1] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.badge-success[b-ci9y5ql6o1] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color, #10b981);
}

.badge-warning[b-ci9y5ql6o1] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color, #f59e0b);
}

.badge-info[b-ci9y5ql6o1] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info-color, #3b82f6);
}

.badge-danger[b-ci9y5ql6o1] {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger-color, #ef4444);
}

.badge-secondary[b-ci9y5ql6o1] {
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
}

/* 课程列表 */
.course-list[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.course-item[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    background: var(--bg-secondary, #f8fafc);
    transition: all 0.2s;
}

.course-item:hover[b-ci9y5ql6o1] {
    background: var(--bg-tertiary, #f1f5f9);
}

.course-rank[b-ci9y5ql6o1] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
    flex-shrink: 0;
}

.course-rank.rank-1[b-ci9y5ql6o1] {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #8b6914;
}

.course-rank.rank-2[b-ci9y5ql6o1] {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #666;
}

.course-rank.rank-3[b-ci9y5ql6o1] {
    background: linear-gradient(135deg, #cd7f32, #e8a87c);
    color: #5c3a1a;
}

.course-info[b-ci9y5ql6o1] {
    flex: 1;
    min-width: 0;
}

.course-name[b-ci9y5ql6o1] {
    font-weight: 600;
    color: var(--text-primary, #1e293b);
    font-size: 14px;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-students[b-ci9y5ql6o1] {
    font-size: 12px;
    color: var(--text-tertiary, #94a3b8);
}

/* 高频错题表格 */
.wrong-questions-table[b-ci9y5ql6o1] {
    overflow-x: auto;
}

.data-table[b-ci9y5ql6o1] {
    width: 100%;
    border-collapse: collapse;
}

.data-table th[b-ci9y5ql6o1] {
    background: var(--bg-secondary, #f8fafc);
    color: var(--text-secondary, #64748b);
    font-size: 12px;
    font-weight: 600;
    text-align: left;
    padding: 12px;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
}

.data-table td[b-ci9y5ql6o1] {
    padding: 12px;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    font-size: 13px;
    color: var(--text-primary, #1e293b);
}

.data-table tbody tr:hover[b-ci9y5ql6o1] {
    background: var(--bg-secondary, #f8fafc);
}

.rank-badge[b-ci9y5ql6o1] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    background: var(--bg-tertiary, #f1f5f9);
    color: var(--text-secondary, #64748b);
}

.rank-badge.rank-1[b-ci9y5ql6o1] {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #8b6914;
}

.rank-badge.rank-2[b-ci9y5ql6o1] {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #666;
}

.rank-badge.rank-3[b-ci9y5ql6o1] {
    background: linear-gradient(135deg, #cd7f32, #e8a87c);
    color: #5c3a1a;
}

.question-content[b-ci9y5ql6o1] {
    max-width: 400px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.error-count[b-ci9y5ql6o1] {
    font-weight: 700;
    color: var(--danger-color, #ef4444);
}

/* 高频错题表格特定样式 */
.question-id-cell[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.question-id[b-ci9y5ql6o1] {
    font-family: Monaco, Consolas, 'Courier New', monospace;
    font-size: 12px;
    color: var(--text-primary, #1e293b);
    font-weight: 500;
}

.sub-id[b-ci9y5ql6o1] {
    font-size: 11px;
    color: var(--text-tertiary, #94a3b8);
}

.count-badge[b-ci9y5ql6o1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 24px;
    padding: 0 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.count-total[b-ci9y5ql6o1] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.count-error[b-ci9y5ql6o1] {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.rate-bar-wrapper[b-ci9y5ql6o1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.rate-bar[b-ci9y5ql6o1] {
    width: 100%;
    height: 6px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 3px;
    overflow: hidden;
}

.rate-bar-fill[b-ci9y5ql6o1] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.rate-bar-success[b-ci9y5ql6o1] {
    background: linear-gradient(90deg, #10b981, #059669);
}

.rate-bar-primary[b-ci9y5ql6o1] {
    background: linear-gradient(90deg, #667eea, #5568d3);
}

.rate-text[b-ci9y5ql6o1] {
    font-size: 12px;
    font-weight: 600;
}

/* 旧的错误率条样式（保留兼容性） */
.error-rate-bar[b-ci9y5ql6o1] {
    position: relative;
    height: 24px;
    background: var(--bg-secondary, #f8fafc);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.error-rate-fill[b-ci9y5ql6o1] {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    border-radius: 12px;
    transition: width 0.3s ease;
}

.error-rate-text[b-ci9y5ql6o1] {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary, #1e293b);
}

/* 空数据 */
.empty-data[b-ci9y5ql6o1] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-tertiary, #94a3b8);
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1600px) {
    .stats-grid[b-ci9y5ql6o1] {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1200px) {
    .stats-grid[b-ci9y5ql6o1] {
        grid-template-columns: repeat(3, 1fr);
    }

    .content-row-3[b-ci9y5ql6o1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .stats-grid[b-ci9y5ql6o1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-row-3[b-ci9y5ql6o1] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .admin-dashboard[b-ci9y5ql6o1] {
        padding: 16px;
    }

    .stats-grid[b-ci9y5ql6o1] {
        grid-template-columns: 1fr;
    }

    .stat-card[b-ci9y5ql6o1] {
        padding: 16px;
    }

    .stat-icon[b-ci9y5ql6o1] {
        width: 48px;
        height: 48px;
    }

    .stat-value[b-ci9y5ql6o1] {
        font-size: 20px;
    }

    .chart-tabs[b-ci9y5ql6o1] {
        width: 100%;
    }

    .chart-tab[b-ci9y5ql6o1] {
        flex: 1;
        padding: 8px 12px;
        font-size: 12px;
    }

    .content-card[b-ci9y5ql6o1] {
        padding: 16px;
    }

    .card-title[b-ci9y5ql6o1] {
        font-size: 16px;
    }

    .wrong-questions-table[b-ci9y5ql6o1] {
        font-size: 12px;
    }

    .data-table th[b-ci9y5ql6o1],
    .data-table td[b-ci9y5ql6o1] {
        padding: 8px;
        font-size: 11px;
    }
}
/* /Components/Pages/Admin/AgreementManagement.razor.rz.scp.css */
/* 协议管理页面样式 */
.agreement-management[b-t2yq8ws0w1] {
    padding: 24px;
    background: #f8fafc;
    min-height: calc(100vh - 64px);
}

/* 加载和错误状态 */
.loading-overlay[b-t2yq8ws0w1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: #64748b;
}

.loading-spinner[b-t2yq8ws0w1] {
    width: 48px;
    height: 48px;
    border: 4px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-t2yq8ws0w1 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-t2yq8ws0w1 {
    to { transform: rotate(360deg); }
}

.error-container[b-t2yq8ws0w1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    text-align: center;
}

.error-icon[b-t2yq8ws0w1] {
    font-size: 64px;
    margin-bottom: 16px;
}

.btn-retry[b-t2yq8ws0w1] {
    margin-top: 24px;
    padding: 10px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-retry:hover[b-t2yq8ws0w1] {
    background: #2563eb;
    transform: translateY(-1px);
}

/* 页面标题 */
.page-header[b-t2yq8ws0w1] {
    margin-bottom: 24px;
}

.header-content[b-t2yq8ws0w1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title[b-t2yq8ws0w1] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.page-title svg[b-t2yq8ws0w1] {
    color: #3b82f6;
}

.page-subtitle[b-t2yq8ws0w1] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* 筛选卡片 */
.filter-card[b-t2yq8ws0w1] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    overflow: hidden;
}

.filter-header[b-t2yq8ws0w1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.filter-header h3[b-t2yq8ws0w1] {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.btn-collapse[b-t2yq8ws0w1] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s;
    border-radius: 6px;
}

.btn-collapse:hover[b-t2yq8ws0w1] {
    background: #f1f5f9;
    color: #3b82f6;
}

.btn-collapse svg[b-t2yq8ws0w1] {
    transition: transform 0.3s;
}

.btn-collapse svg.rotate-180[b-t2yq8ws0w1] {
    transform: rotate(180deg);
}

.filter-content[b-t2yq8ws0w1] {
    padding: 24px;
}

.filter-grid[b-t2yq8ws0w1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 20px;
}

.filter-item[b-t2yq8ws0w1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-item label[b-t2yq8ws0w1] {
    font-size: 13px;
    font-weight: 500;
    color: #475569;
}

.input-field[b-t2yq8ws0w1] {
    padding: 10px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
    outline: none;
}

.input-field:focus[b-t2yq8ws0w1] {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-actions[b-t2yq8ws0w1] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.btn[b-t2yq8ws0w1] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary[b-t2yq8ws0w1] {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover[b-t2yq8ws0w1] {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary[b-t2yq8ws0w1] {
    background: #f1f5f9;
    color: #475569;
}

.btn-secondary:hover[b-t2yq8ws0w1] {
    background: #e2e8f0;
}

.btn-danger[b-t2yq8ws0w1] {
    background: #ef4444;
    color: white;
}

.btn-danger:hover[b-t2yq8ws0w1] {
    background: #dc2626;
}

.btn-danger:disabled[b-t2yq8ws0w1] {
    background: #fca5a5;
    cursor: not-allowed;
}

/* 统计卡片 */
.stats-row[b-t2yq8ws0w1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-t2yq8ws0w1] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s;
}

.stat-card:hover[b-t2yq8ws0w1] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.stat-icon[b-t2yq8ws0w1] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    flex-shrink: 0;
}

.stat-content[b-t2yq8ws0w1] {
    flex: 1;
}

.stat-label[b-t2yq8ws0w1] {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 4px;
}

.stat-value[b-t2yq8ws0w1] {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
}

/* 图表卡片 */
.chart-card[b-t2yq8ws0w1] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    overflow: hidden;
}

.chart-header[b-t2yq8ws0w1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 16px;
}

.chart-title[b-t2yq8ws0w1] {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 4px 0;
}

.chart-subtitle[b-t2yq8ws0w1] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

.chart-tabs[b-t2yq8ws0w1] {
    display: flex;
    gap: 8px;
}

.chart-tab[b-t2yq8ws0w1] {
    padding: 8px 16px;
    border: 1px solid #e2e8f0;
    background: white;
    color: #64748b;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.chart-tab:hover[b-t2yq8ws0w1] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.chart-tab.active[b-t2yq8ws0w1] {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.chart-container[b-t2yq8ws0w1] {
    padding: 24px;
    min-height: 300px;
}

.empty-chart[b-t2yq8ws0w1] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: #94a3b8;
    font-size: 14px;
}

/* 表格卡片 */
.table-card[b-t2yq8ws0w1] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table-header[b-t2yq8ws0w1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.table-title[b-t2yq8ws0w1] {
    font-size: 16px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.count-badge[b-t2yq8ws0w1] {
    font-size: 12px;
    font-weight: 500;
    background: #eff6ff;
    color: #3b82f6;
    padding: 4px 12px;
    border-radius: 12px;
}

.table-actions[b-t2yq8ws0w1] {
    display: flex;
    gap: 12px;
}

.btn-outline[b-t2yq8ws0w1] {
    background: white;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.btn-outline:hover[b-t2yq8ws0w1] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.table-container[b-t2yq8ws0w1] {
    overflow-x: auto;
}

.data-table[b-t2yq8ws0w1] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-t2yq8ws0w1] {
    background: #f8fafc;
}

.data-table th[b-t2yq8ws0w1] {
    padding: 14px 24px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}

.data-table tbody tr[b-t2yq8ws0w1] {
    transition: background 0.2s;
}

.data-table tbody tr:hover[b-t2yq8ws0w1] {
    background: #f8fafc;
}

.data-table td[b-t2yq8ws0w1] {
    padding: 16px 24px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    color: #334155;
}

/* 用户信息卡片 */
.user-info-cell[b-t2yq8ws0w1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-t2yq8ws0w1] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-avatar img[b-t2yq8ws0w1] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder[b-t2yq8ws0w1] {
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.user-details[b-t2yq8ws0w1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.user-name[b-t2yq8ws0w1] {
    font-weight: 600;
    color: #1e293b;
    font-size: 14px;
}

.user-phone[b-t2yq8ws0w1] {
    font-size: 13px;
    color: #64748b;
}

.user-id-small[b-t2yq8ws0w1] {
    font-size: 11px;
    color: #94a3b8;
    font-family: 'Consolas', 'Monaco', monospace;
    word-break: break-all;
}

/* 协议模板标题 */
.template-title[b-t2yq8ws0w1] {
    font-weight: 500;
    color: #1e293b;
}

/* 签署人姓名 */
.signer-name[b-t2yq8ws0w1] {
    font-weight: 500;
    color: #475569;
}

/* 验证码 */
.auth-code[b-t2yq8ws0w1] {
    display: inline-block;
    padding: 4px 10px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border-radius: 6px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
}

.year-badge[b-t2yq8ws0w1] {
    display: inline-block;
    padding: 4px 12px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.datetime[b-t2yq8ws0w1] {
    color: #64748b;
    font-size: 13px;
}

.action-buttons[b-t2yq8ws0w1] {
    display: flex;
    gap: 8px;
}

.btn-action[b-t2yq8ws0w1] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-view[b-t2yq8ws0w1] {
    color: #3b82f6;
    border-color: #3b82f6;
}

.btn-view:hover[b-t2yq8ws0w1] {
    background: #eff6ff;
}

.btn-delete[b-t2yq8ws0w1] {
    color: #ef4444;
    border-color: #ef4444;
}

.btn-delete:hover[b-t2yq8ws0w1] {
    background: #fef2f2;
}

/* 空状态 */
.empty-state[b-t2yq8ws0w1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-icon[b-t2yq8ws0w1] {
    font-size: 72px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state h3[b-t2yq8ws0w1] {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 8px 0;
}

.empty-state p[b-t2yq8ws0w1] {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}

/* 分页 */
.pagination[b-t2yq8ws0w1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-top: 1px solid #e2e8f0;
}

.pagination-info[b-t2yq8ws0w1] {
    font-size: 13px;
    color: #64748b;
}

.pagination-controls[b-t2yq8ws0w1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-page[b-t2yq8ws0w1] {
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    color: #475569;
}

.btn-page:hover:not(:disabled)[b-t2yq8ws0w1] {
    border-color: #3b82f6;
    color: #3b82f6;
    background: #eff6ff;
}

.btn-page:disabled[b-t2yq8ws0w1] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-number[b-t2yq8ws0w1] {
    padding: 0 12px;
    font-size: 13px;
    color: #475569;
    font-weight: 500;
}

/* 模态框 */
.modal-overlay[b-t2yq8ws0w1] {
    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;
    animation: fadeIn-b-t2yq8ws0w1 0.2s;
}

@keyframes fadeIn-b-t2yq8ws0w1 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-t2yq8ws0w1] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    animation: slideUp-b-t2yq8ws0w1 0.3s;
}

@keyframes slideUp-b-t2yq8ws0w1 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pdf-modal[b-t2yq8ws0w1] {
    width: 90vw;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.delete-modal[b-t2yq8ws0w1] {
    width: 100%;
    max-width: 480px;
}

.modal-header[b-t2yq8ws0w1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.modal-header h3[b-t2yq8ws0w1] {
    font-size: 18px;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.btn-close[b-t2yq8ws0w1] {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #64748b;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-close:hover[b-t2yq8ws0w1] {
    background: #f1f5f9;
    color: #ef4444;
}

.modal-body[b-t2yq8ws0w1] {
    padding: 24px;
    flex: 1;
    overflow: auto;
}

.pdf-viewer[b-t2yq8ws0w1] {
    width: 100%;
    height: 70vh;
    border: none;
    border-radius: 8px;
}

.warning-icon[b-t2yq8ws0w1] {
    font-size: 48px;
    text-align: center;
    margin-bottom: 16px;
}

.delete-info[b-t2yq8ws0w1] {
    margin-top: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 8px;
    border-left: 3px solid #ef4444;
}

.delete-info p[b-t2yq8ws0w1] {
    margin: 8px 0;
    font-size: 14px;
    color: #475569;
}

.delete-info strong[b-t2yq8ws0w1] {
    color: #0f172a;
}

.modal-footer[b-t2yq8ws0w1] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e2e8f0;
}

/* 响应式设计 */
@media (max-width: 1024px) {
    .filter-grid[b-t2yq8ws0w1] {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-row[b-t2yq8ws0w1] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .agreement-management[b-t2yq8ws0w1] {
        padding: 16px;
    }

    .filter-grid[b-t2yq8ws0w1] {
        grid-template-columns: 1fr;
    }

    .stats-row[b-t2yq8ws0w1] {
        grid-template-columns: 1fr;
    }

    .chart-header[b-t2yq8ws0w1] {
        flex-direction: column;
        align-items: flex-start;
    }

    .table-container[b-t2yq8ws0w1] {
        overflow-x: scroll;
    }

    .data-table[b-t2yq8ws0w1] {
        min-width: 800px;
    }

    .pagination[b-t2yq8ws0w1] {
        flex-direction: column;
        gap: 16px;
    }

    .pdf-modal[b-t2yq8ws0w1] {
        width: 95vw;
    }

    .pdf-viewer[b-t2yq8ws0w1] {
        height: 60vh;
    }
}

@media (max-width: 480px) {
    .page-title[b-t2yq8ws0w1] {
        font-size: 24px;
    }

    .stat-value[b-t2yq8ws0w1] {
        font-size: 24px;
    }

    .chart-tabs[b-t2yq8ws0w1] {
        flex-wrap: wrap;
    }

    .modal-overlay[b-t2yq8ws0w1] {
        padding: 10px;
    }
}
/* /Components/Pages/Admin/BookContentManagement.razor.rz.scp.css */
/* ========== 全局容器 ========== */
.book-content-management[b-dwigm1xzy8] {
    height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    background: #f5f7fa;
    overflow: hidden;
}

/* ========== 顶部工具栏 ========== */
.toolbar[b-dwigm1xzy8] {
    background: white;
    border-bottom: 1px solid #e4e7ed;
    padding: 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.toolbar-left[b-dwigm1xzy8] {
    display: flex;
    align-items: center;
}

.page-title[b-dwigm1xzy8] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #303133;
}

.toolbar-right[b-dwigm1xzy8] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.book-selector[b-dwigm1xzy8] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.book-selector label[b-dwigm1xzy8] {
    font-size: 14px;
    color: #606266;
    font-weight: 500;
}

.book-select[b-dwigm1xzy8] {
    min-width: 300px;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    color: #606266;
    background: white;
    cursor: pointer;
    transition: all 0.3s;
}

.book-select:hover[b-dwigm1xzy8] {
    border-color: #409eff;
}

.book-select:focus[b-dwigm1xzy8] {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

/* ========== 内容包装器 ========== */
.content-wrapper[b-dwigm1xzy8] {
    display: flex;
    flex: 1;
    overflow: hidden;
    gap: 16px;
    padding: 16px;
}

/* ========== 树形面板 ========== */
.tree-panel[b-dwigm1xzy8] {
    width: 400px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.panel-header[b-dwigm1xzy8] {
    padding: 16px 20px;
    border-bottom: 1px solid #e4e7ed;
    background: #fafafa;
}

.panel-header h3[b-dwigm1xzy8] {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.panel-actions[b-dwigm1xzy8] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.search-input[b-dwigm1xzy8] {
    flex: 1;
    min-width: 200px;
    padding: 8px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    transition: all 0.3s;
}

.search-input:focus[b-dwigm1xzy8] {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

.tree-content[b-dwigm1xzy8] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

/* ========== 树形视图 ========== */
.tree-view[b-dwigm1xzy8] {
    font-size: 14px;
}

.tree-node[b-dwigm1xzy8] {
    margin-bottom: 2px;
}

.tree-node-content[b-dwigm1xzy8] {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.tree-node-content:hover[b-dwigm1xzy8] {
    background: #f5f7fa;
}

.tree-node-content.selected[b-dwigm1xzy8] {
    background: #ecf5ff;
    color: #409eff;
    font-weight: 500;
}

.tree-toggle[b-dwigm1xzy8] {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 4px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    color: #909399;
    transition: transform 0.2s;
}

.tree-toggle:hover[b-dwigm1xzy8] {
    color: #409eff;
}

.tree-toggle-empty[b-dwigm1xzy8] {
    cursor: default;
    opacity: 0;
}

.tree-icon[b-dwigm1xzy8] {
    margin-right: 6px;
    font-size: 16px;
}

.tree-title[b-dwigm1xzy8] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tree-number[b-dwigm1xzy8] {
    display: inline-block;
    padding: 2px 6px;
    background: #e4e7ed;
    border-radius: 3px;
    font-size: 12px;
    font-weight: 500;
    color: #606266;
}

.tree-actions[b-dwigm1xzy8] {
    display: none;
    gap: 4px;
    margin-left: auto;
}

.tree-node-content:hover .tree-actions[b-dwigm1xzy8] {
    display: flex;
}

.btn-icon[b-dwigm1xzy8] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover[b-dwigm1xzy8] {
    background: #409eff;
    transform: scale(1.1);
}

.tree-children[b-dwigm1xzy8] {
    margin-left: 0;
}

/* ========== 详情面板 ========== */
.detail-panel[b-dwigm1xzy8] {
    flex: 1;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-content[b-dwigm1xzy8] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ========== 查看模式 ========== */
.view-mode[b-dwigm1xzy8] {
    max-width: 900px;
}

.info-grid[b-dwigm1xzy8] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
    padding: 16px;
    background: #f5f7fa;
    border-radius: 6px;
}

.info-item[b-dwigm1xzy8] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-item label[b-dwigm1xzy8] {
    font-size: 12px;
    color: #909399;
    font-weight: 500;
}

.info-item span[b-dwigm1xzy8] {
    font-size: 14px;
    color: #303133;
}

.badge[b-dwigm1xzy8] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge-primary[b-dwigm1xzy8] {
    background: #ecf5ff;
    color: #409eff;
}

.badge-info[b-dwigm1xzy8] {
    background: #f4f4f5;
    color: #909399;
}

.badge-success[b-dwigm1xzy8] {
    background: #f0f9ff;
    color: #67c23a;
}

.badge-warning[b-dwigm1xzy8] {
    background: #fdf6ec;
    color: #e6a23c;
}

.badge-secondary[b-dwigm1xzy8] {
    background: #f4f4f5;
    color: #909399;
}

.badge-light[b-dwigm1xzy8] {
    background: #fafafa;
    color: #606266;
    border: 1px solid #e4e7ed;
}

.content-section[b-dwigm1xzy8] {
    margin-bottom: 24px;
}

.content-section h4[b-dwigm1xzy8] {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #606266;
    padding-bottom: 8px;
    border-bottom: 2px solid #e4e7ed;
}

.content-section p[b-dwigm1xzy8] {
    margin: 0;
    line-height: 1.6;
    color: #303133;
}

.content-display[b-dwigm1xzy8] {
    padding: 16px;
    background: #fafafa;
    border-radius: 6px;
    border: 1px solid #e4e7ed;
}

.content-display pre[b-dwigm1xzy8] {
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #303133;
}

/* ========== 编辑表单 ========== */
.edit-form[b-dwigm1xzy8] {
    max-width: 800px;
}

.form-group[b-dwigm1xzy8] {
    margin-bottom: 20px;
}

.form-group label[b-dwigm1xzy8] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #606266;
}

.form-control[b-dwigm1xzy8] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    font-size: 14px;
    color: #606266;
    transition: all 0.3s;
    box-sizing: border-box;
}

.form-control:focus[b-dwigm1xzy8] {
    outline: none;
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
}

textarea.form-control[b-dwigm1xzy8] {
    resize: vertical;
    font-family: inherit;
}

.form-group input[type="checkbox"][b-dwigm1xzy8] {
    margin-right: 8px;
    cursor: pointer;
}

.form-actions[b-dwigm1xzy8] {
    display: flex;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid #e4e7ed;
}

/* ========== 按钮样式 ========== */
.btn[b-dwigm1xzy8] {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.btn:disabled[b-dwigm1xzy8] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-primary[b-dwigm1xzy8] {
    background: #409eff;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-dwigm1xzy8] {
    background: #66b1ff;
}

.btn-success[b-dwigm1xzy8] {
    background: #67c23a;
    color: white;
}

.btn-success:hover:not(:disabled)[b-dwigm1xzy8] {
    background: #85ce61;
}

.btn-danger[b-dwigm1xzy8] {
    background: #f56c6c;
    color: white;
}

.btn-danger:hover:not(:disabled)[b-dwigm1xzy8] {
    background: #f78989;
}

.btn-secondary[b-dwigm1xzy8] {
    background: #f4f4f5;
    color: #606266;
}

.btn-secondary:hover:not(:disabled)[b-dwigm1xzy8] {
    background: #e4e7ed;
}

.btn-sm[b-dwigm1xzy8] {
    padding: 6px 12px;
    font-size: 13px;
}

.icon[b-dwigm1xzy8] {
    font-size: 14px;
}

/* ========== 模态对话框 ========== */
.modal-backdrop[b-dwigm1xzy8] {
    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-dwigm1xzy8 0.2s;
}

@keyframes fadeIn-b-dwigm1xzy8 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-dialog[b-dwigm1xzy8] {
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-dwigm1xzy8 0.3s;
    pointer-events: auto;
}

.modal-dialog.modal-sm[b-dwigm1xzy8] {
    max-width: 400px;
}

.modal-dialog.modal-lg[b-dwigm1xzy8] {
    max-width: 900px;
}

@keyframes slideUp-b-dwigm1xzy8 {
    from {
        transform: translateY(50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-dwigm1xzy8] {
    padding: 20px 24px;
    border-bottom: 1px solid #e4e7ed;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3[b-dwigm1xzy8] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #303133;
}

.btn-close[b-dwigm1xzy8] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 20px;
    color: #909399;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-close:hover[b-dwigm1xzy8] {
    background: #f5f7fa;
    color: #303133;
}

.modal-body[b-dwigm1xzy8] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-dwigm1xzy8] {
    padding: 16px 24px;
    border-top: 1px solid #e4e7ed;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.info-box[b-dwigm1xzy8] {
    padding: 12px 16px;
    background: #ecf5ff;
    border: 1px solid #b3d8ff;
    border-radius: 4px;
    margin-top: 16px;
}

.info-box p[b-dwigm1xzy8] {
    margin: 4px 0;
    font-size: 13px;
    color: #409eff;
}

.warning-box[b-dwigm1xzy8] {
    padding: 12px 16px;
    background: #fef0f0;
    border: 1px solid #fbc4c4;
    border-radius: 4px;
    margin-top: 16px;
}

.warning-box p[b-dwigm1xzy8] {
    margin: 4px 0;
    font-size: 13px;
    color: #f56c6c;
}

/* ========== 空状态 ========== */
.empty-state[b-dwigm1xzy8],
.empty-state-large[b-dwigm1xzy8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #909399;
}

.empty-state-large[b-dwigm1xzy8] {
    height: 100%;
}

.empty-state p[b-dwigm1xzy8],
.empty-state-large p[b-dwigm1xzy8] {
    margin: 8px 0 0 0;
    font-size: 14px;
}

.empty-state-large h3[b-dwigm1xzy8] {
    margin: 16px 0 8px 0;
    font-size: 18px;
    color: #606266;
}

.empty-icon[b-dwigm1xzy8] {
    font-size: 64px;
    opacity: 0.5;
}

.no-book-selected[b-dwigm1xzy8] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== 加载动画 ========== */
.loading-spinner[b-dwigm1xzy8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.spinner[b-dwigm1xzy8] {
    width: 40px;
    height: 40px;
    border: 4px solid #e4e7ed;
    border-top-color: #409eff;
    border-radius: 50%;
    animation: spin-b-dwigm1xzy8 1s linear infinite;
}

.spinner-sm[b-dwigm1xzy8] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-dwigm1xzy8 0.8s linear infinite;
}

@keyframes spin-b-dwigm1xzy8 {
    to {
        transform: rotate(360deg);
    }
}

.loading-spinner p[b-dwigm1xzy8] {
    margin-top: 16px;
    font-size: 14px;
    color: #909399;
}

/* ========== 消息提示 ========== */
.toast[b-dwigm1xzy8] {
    position: fixed;
    top: 80px;
    right: 24px;
    min-width: 300px;
    padding: 16px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    color: white;
    z-index: 2000;
    animation: slideInRight-b-dwigm1xzy8 0.3s, slideOutRight-b-dwigm1xzy8 0.3s 2.7s;
}

@keyframes slideInRight-b-dwigm1xzy8 {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight-b-dwigm1xzy8 {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

.toast-info[b-dwigm1xzy8] {
    background: #409eff;
}

.toast-success[b-dwigm1xzy8] {
    background: #67c23a;
}

.toast-warning[b-dwigm1xzy8] {
    background: #e6a23c;
}

.toast-error[b-dwigm1xzy8] {
    background: #f56c6c;
}

/* ========== 图书管理对话框 ========== */
.book-form-section[b-dwigm1xzy8] {
    padding-bottom: 24px;
    margin-bottom: 24px;
    border-bottom: 2px solid #e4e7ed;
}

.book-form-section h4[b-dwigm1xzy8],
.book-list-section h4[b-dwigm1xzy8] {
    margin: 0 0 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

.form-row[b-dwigm1xzy8] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

.book-list-section[b-dwigm1xzy8] {
    max-height: 400px;
    overflow-y: auto;
}

.book-list[b-dwigm1xzy8] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.book-item[b-dwigm1xzy8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border: 1px solid #e4e7ed;
    border-radius: 6px;
    transition: all 0.3s;
    background: white;
}

.book-item:hover[b-dwigm1xzy8] {
    border-color: #409eff;
    box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.book-item.selected[b-dwigm1xzy8] {
    border-color: #409eff;
    background: #ecf5ff;
}

.book-info[b-dwigm1xzy8] {
    flex: 1;
}

.book-title[b-dwigm1xzy8] {
    font-size: 15px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 8px;
}

.book-meta[b-dwigm1xzy8] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.book-authors[b-dwigm1xzy8] {
    font-size: 12px;
    color: #909399;
}

.book-actions[b-dwigm1xzy8] {
    display: flex;
    gap: 8px;
    margin-left: 16px;
}

/* ========== 响应式设计 ========== */
@media (max-width: 1200px) {
    .tree-panel[b-dwigm1xzy8] {
        width: 320px;
    }
}

@media (max-width: 992px) {
    .content-wrapper[b-dwigm1xzy8] {
        flex-direction: column;
    }
    
    .tree-panel[b-dwigm1xzy8] {
        width: 100%;
        height: 400px;
    }
    
    .detail-panel[b-dwigm1xzy8] {
        flex: 1;
    }
    
    .book-select[b-dwigm1xzy8] {
        min-width: 200px;
    }
}

@media (max-width: 768px) {
    .toolbar[b-dwigm1xzy8] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    
    .toolbar-right[b-dwigm1xzy8] {
        flex-wrap: wrap;
    }
    
    .book-select[b-dwigm1xzy8] {
        min-width: auto;
        width: 100%;
    }
    
    .info-grid[b-dwigm1xzy8] {
        grid-template-columns: 1fr;
    }
    
    .modal-dialog[b-dwigm1xzy8] {
        width: 95%;
        max-height: 90vh;
    }
    
    .form-row[b-dwigm1xzy8] {
        grid-template-columns: 1fr;
    }
    
    .book-item[b-dwigm1xzy8] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .book-actions[b-dwigm1xzy8] {
        margin-left: 0;
        justify-content: flex-end;
    }
}

/* ========== 滚动条样式 ========== */
.tree-content[b-dwigm1xzy8]::-webkit-scrollbar,
.detail-content[b-dwigm1xzy8]::-webkit-scrollbar,
.modal-body[b-dwigm1xzy8]::-webkit-scrollbar {
    width: 8px;
}

.tree-content[b-dwigm1xzy8]::-webkit-scrollbar-track,
.detail-content[b-dwigm1xzy8]::-webkit-scrollbar-track,
.modal-body[b-dwigm1xzy8]::-webkit-scrollbar-track {
    background: #f5f7fa;
}

.tree-content[b-dwigm1xzy8]::-webkit-scrollbar-thumb,
.detail-content[b-dwigm1xzy8]::-webkit-scrollbar-thumb,
.modal-body[b-dwigm1xzy8]::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 4px;
}

.tree-content[b-dwigm1xzy8]::-webkit-scrollbar-thumb:hover,
.detail-content[b-dwigm1xzy8]::-webkit-scrollbar-thumb:hover,
.modal-body[b-dwigm1xzy8]::-webkit-scrollbar-thumb:hover {
    background: #909399;
}
/* /Components/Pages/Admin/CourseManagement.razor.rz.scp.css */
/* ==================== CSS 变量定义 ==================== */
:root[b-bs7fpb88hd] {
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
    
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* ==================== 全局容器样式 ==================== */
.course-management[b-bs7fpb88hd] {
    padding: 24px;
    max-width: 1600px;
    margin: 0 auto;
}

.page-header[b-bs7fpb88hd] {
    margin-bottom: 32px;
}

.page-header h1[b-bs7fpb88hd] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 8px 0;
}

.page-subtitle[b-bs7fpb88hd] {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

/* ==================== Tab 导航样式 ==================== */
.tab-navigation[b-bs7fpb88hd] {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--border-light);
    padding-bottom: 0;
}

.tab-button[b-bs7fpb88hd] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    position: relative;
    top: 2px;
}

.tab-button:hover[b-bs7fpb88hd] {
    color: var(--primary-color);
    background-color: rgba(79, 70, 229, 0.05);
}

.tab-button.active[b-bs7fpb88hd] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.tab-icon[b-bs7fpb88hd] {
    font-size: 18px;
}

/* ==================== Tab 内容区域 ==================== */
.tab-content[b-bs7fpb88hd] {
    min-height: 500px;
}

/* ==================== 统计卡片样式 ==================== */
.stats-grid[b-bs7fpb88hd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-bs7fpb88hd] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    transition: all 0.2s ease;
}

.stat-card:hover[b-bs7fpb88hd] {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.stat-icon[b-bs7fpb88hd] {
    font-size: 32px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.stat-content[b-bs7fpb88hd] {
    flex: 1;
}

.stat-label[b-bs7fpb88hd] {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value[b-bs7fpb88hd] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 4px;
}

.stat-change[b-bs7fpb88hd] {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* ==================== 筛选卡片样式 ==================== */
.filter-card[b-bs7fpb88hd] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

.filter-grid[b-bs7fpb88hd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.filter-actions[b-bs7fpb88hd] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ==================== 表单控件样式 ==================== */
.form-group[b-bs7fpb88hd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-label[b-bs7fpb88hd] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input[b-bs7fpb88hd],
.form-select[b-bs7fpb88hd] {
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: all 0.2s ease;
}

.form-input:focus[b-bs7fpb88hd],
.form-select:focus[b-bs7fpb88hd] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.form-input[b-bs7fpb88hd]::placeholder {
    color: var(--text-tertiary);
}

/* ==================== 按钮样式 ==================== */
.btn[b-bs7fpb88hd] {
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary[b-bs7fpb88hd] {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover[b-bs7fpb88hd] {
    background-color: var(--primary-hover);
}

.btn-secondary[b-bs7fpb88hd] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover[b-bs7fpb88hd] {
    background-color: var(--border-medium);
}

.btn-success[b-bs7fpb88hd] {
    background-color: var(--success-color);
    color: white;
}

.btn-danger[b-bs7fpb88hd] {
    background-color: var(--error-color);
    color: white;
}

.btn-sm[b-bs7fpb88hd] {
    padding: 6px 12px;
    font-size: 13px;
}

.btn-icon[b-bs7fpb88hd] {
    padding: 8px;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn:disabled[b-bs7fpb88hd] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ==================== 数据表格样式 ==================== */
.data-table-container[b-bs7fpb88hd] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.data-table[b-bs7fpb88hd] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-bs7fpb88hd] {
    background-color: var(--bg-secondary);
}

.data-table th[b-bs7fpb88hd] {
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-light);
}

.data-table td[b-bs7fpb88hd] {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
}

.data-table tbody tr:hover[b-bs7fpb88hd] {
    background-color: var(--bg-secondary);
}

.data-table tbody tr:last-child td[b-bs7fpb88hd] {
    border-bottom: none;
}

.table-sortable[b-bs7fpb88hd] {
    cursor: pointer;
    user-select: none;
}

.table-sortable:hover[b-bs7fpb88hd] {
    color: var(--primary-color);
}

.sort-icon[b-bs7fpb88hd] {
    margin-left: 4px;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ==================== 分页样式 ==================== */
.pagination[b-bs7fpb88hd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: var(--bg-secondary);
}

.pagination-info[b-bs7fpb88hd] {
    font-size: 14px;
    color: var(--text-secondary);
}

.pagination-controls[b-bs7fpb88hd] {
    display: flex;
    gap: 8px;
}

.pagination-button[b-bs7fpb88hd] {
    padding: 8px 12px;
    border: 1px solid var(--border-medium);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-button:hover:not(:disabled)[b-bs7fpb88hd] {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination-button:disabled[b-bs7fpb88hd] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-page[b-bs7fpb88hd] {
    font-weight: 600;
}

/* ==================== 徽章样式 ==================== */
.badge[b-bs7fpb88hd] {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.badge-success[b-bs7fpb88hd] {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.badge-warning[b-bs7fpb88hd] {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.badge-error[b-bs7fpb88hd] {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
}

.badge-info[b-bs7fpb88hd] {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--info-color);
}

/* ==================== 模态框样式 ==================== */
.modal-overlay[b-bs7fpb88hd] {
    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: 20px;
}

.modal[b-bs7fpb88hd] {
    background-color: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 700px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-bs7fpb88hd 0.3s ease;
}

@keyframes modalSlideIn-b-bs7fpb88hd {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-bs7fpb88hd] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-bs7fpb88hd] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close[b-bs7fpb88hd] {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.modal-close:hover[b-bs7fpb88hd] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.modal-body[b-bs7fpb88hd] {
    padding: 24px;
    overflow-y: auto;
}

.modal-footer[b-bs7fpb88hd] {
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* ==================== 详情视图样式 ==================== */
.detail-grid[b-bs7fpb88hd] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-item[b-bs7fpb88hd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.detail-label[b-bs7fpb88hd] {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-bs7fpb88hd] {
    font-size: 15px;
    color: var(--text-primary);
}

.detail-full[b-bs7fpb88hd] {
    grid-column: 1 / -1;
}

/* ==================== 分栏布局样式 ==================== */
.split-layout[b-bs7fpb88hd] {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 20px;
    min-height: 600px;
}

.split-three-columns[b-bs7fpb88hd] {
    display: grid;
    grid-template-columns: 280px 1fr 320px;
    gap: 20px;
}

.panel[b-bs7fpb88hd] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.panel-header[b-bs7fpb88hd] {
    padding: 16px;
    border-bottom: 1px solid var(--border-light);
    background-color: var(--bg-secondary);
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.panel-body[b-bs7fpb88hd] {
    padding: 16px;
    overflow-y: auto;
}

/* ==================== 树形结构样式 ==================== */
.tree-list[b-bs7fpb88hd] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tree-item[b-bs7fpb88hd] {
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.tree-item:hover[b-bs7fpb88hd] {
    background-color: var(--bg-tertiary);
}

.tree-item.active[b-bs7fpb88hd] {
    background-color: rgba(79, 70, 229, 0.1);
    color: var(--primary-color);
    font-weight: 500;
}

.tree-children[b-bs7fpb88hd] {
    margin-left: 20px;
}

/* ==================== 空状态样式 ==================== */
.empty-state[b-bs7fpb88hd] {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-icon[b-bs7fpb88hd] {
    font-size: 48px;
    margin-bottom: 16px;
}

.empty-title[b-bs7fpb88hd] {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-description[b-bs7fpb88hd] {
    font-size: 14px;
    color: var(--text-secondary);
}

/* ==================== 加载状态样式 ==================== */
.loading-overlay[b-bs7fpb88hd] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.loading-spinner[b-bs7fpb88hd] {
    border: 3px solid var(--border-light);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin-b-bs7fpb88hd 0.8s linear infinite;
}

@keyframes spin-b-bs7fpb88hd {
    to {
        transform: rotate(360deg);
    }
}

/* ==================== 卡片列表样式 ==================== */
.card-list[b-bs7fpb88hd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card-item[b-bs7fpb88hd] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.card-item:hover[b-bs7fpb88hd] {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.card-item.selected[b-bs7fpb88hd] {
    border-color: var(--primary-color);
    background-color: rgba(79, 70, 229, 0.05);
}

.card-title[b-bs7fpb88hd] {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.card-subtitle[b-bs7fpb88hd] {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ==================== 观看进度特定样式 ==================== */
.progress-cell[b-bs7fpb88hd] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-bar[b-bs7fpb88hd] {
    flex: 1;
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill[b-bs7fpb88hd] {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color) 0%, #22c55e 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.progress-text[b-bs7fpb88hd] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 50px;
    text-align: right;
}

.statistics-cards[b-bs7fpb88hd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card-primary .stat-icon[b-bs7fpb88hd] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card-info .stat-icon[b-bs7fpb88hd] {
    background: linear-gradient(135deg, #2196f3 0%, #21cbf3 100%);
}

.stat-card-success .stat-icon[b-bs7fpb88hd] {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
}

.stat-card-warning .stat-icon[b-bs7fpb88hd] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.filter-section[b-bs7fpb88hd] {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
}

.filter-row[b-bs7fpb88hd] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.filter-item[b-bs7fpb88hd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-input[b-bs7fpb88hd] {
    padding: 10px 12px;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-sm);
    font-size: 14px;
    color: var(--text-primary);
    background-color: var(--bg-primary);
    transition: all 0.2s ease;
}

.filter-input:focus[b-bs7fpb88hd] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.loading-state[b-bs7fpb88hd] {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 16px;
}

.loading-state[b-bs7fpb88hd]::before {
    content: "⏳";
    font-size: 48px;
    display: block;
    margin-bottom: 16px;
}

.pagination-btn[b-bs7fpb88hd] {
    padding: 10px 16px;
    border: 1px solid var(--border-medium);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.pagination-btn:hover:not(:disabled)[b-bs7fpb88hd] {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.pagination-btn:disabled[b-bs7fpb88hd] {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-info[b-bs7fpb88hd] {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* ==================== 响应式样式 ==================== */
@media (max-width: 1200px) {
    .split-three-columns[b-bs7fpb88hd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 968px) {
    .split-layout[b-bs7fpb88hd] {
        grid-template-columns: 1fr;
    }

    .stats-grid[b-bs7fpb88hd] {
        grid-template-columns: repeat(2, 1fr);
    }

    .filter-grid[b-bs7fpb88hd] {
        grid-template-columns: 1fr;
    }

    .detail-grid[b-bs7fpb88hd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .course-management[b-bs7fpb88hd] {
        padding: 16px;
    }

    .stats-grid[b-bs7fpb88hd] {
        grid-template-columns: 1fr;
    }

    .tab-button span:not(.tab-icon)[b-bs7fpb88hd] {
        display: none;
    }

    .modal[b-bs7fpb88hd] {
        max-width: 100%;
    }
}
/* /Components/Pages/Admin/FeedBackManagement.razor.rz.scp.css */
/* ========================================
   反馈管理页面样式 - 现代扁平化设计
   ======================================== */

/* 颜色变量 */
:root[b-2t4l82fr5p] {
    --primary-color: #667eea;
    --primary-dark: #5a67d8;
    --primary-light: #7c8ff5;
    --secondary-color: #764ba2;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* 主容器 */
.feedback-management[b-2t4l82fr5p] {
    padding: 30px;
    max-width: 1600px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

/* ========================================
   加载和错误状态
   ======================================== */
.loading-overlay[b-2t4l82fr5p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--text-secondary);
}

.loading-spinner[b-2t4l82fr5p] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin-b-2t4l82fr5p 0.8s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin-b-2t4l82fr5p {
    to { transform: rotate(360deg); }
}

.error-container[b-2t4l82fr5p] {
    text-align: center;
    padding: 60px 20px;
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.error-icon[b-2t4l82fr5p] {
    font-size: 64px;
    margin-bottom: 20px;
}

.error-container h3[b-2t4l82fr5p] {
    color: var(--text-primary);
    font-size: 24px;
    margin-bottom: 12px;
}

.error-container p[b-2t4l82fr5p] {
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.btn-retry[b-2t4l82fr5p] {
    padding: 12px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-retry:hover[b-2t4l82fr5p] {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* ========================================
   页面标题
   ======================================== */
.page-header[b-2t4l82fr5p] {
    margin-bottom: 32px;
}

.header-content[b-2t4l82fr5p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.page-title[b-2t4l82fr5p] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.page-title svg[b-2t4l82fr5p] {
    color: var(--primary-color);
}

.page-subtitle[b-2t4l82fr5p] {
    font-size: 16px;
    color: var(--text-secondary);
    margin: 0;
}

/* ========================================
   统计卡片
   ======================================== */
.stats-row[b-2t4l82fr5p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 24px;
    margin-bottom: 32px;
}

.stat-card[b-2t4l82fr5p] {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: all var(--transition-base);
    border-left: 4px solid transparent;
}

.stat-card:hover[b-2t4l82fr5p] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.stat-card.stat-total[b-2t4l82fr5p] {
    border-left-color: var(--info-color);
}

.stat-card.stat-pending[b-2t4l82fr5p] {
    border-left-color: var(--warning-color);
}

.stat-card.stat-processed[b-2t4l82fr5p] {
    border-left-color: var(--success-color);
}

.stat-card.stat-today[b-2t4l82fr5p] {
    border-left-color: var(--primary-color);
}

.stat-icon[b-2t4l82fr5p] {
    font-size: 48px;
    line-height: 1;
}

.stat-content[b-2t4l82fr5p] {
    flex: 1;
}

.stat-label[b-2t4l82fr5p] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.stat-value[b-2t4l82fr5p] {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}

/* ========================================
   筛选卡片
   ======================================== */
.filter-card[b-2t4l82fr5p] {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    margin-bottom: 32px;
    overflow: hidden;
}

.filter-header[b-2t4l82fr5p] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.filter-header h3[b-2t4l82fr5p] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.filter-header svg[b-2t4l82fr5p] {
    color: var(--primary-color);
}

.filter-content[b-2t4l82fr5p] {
    padding: 24px;
}

.filter-grid[b-2t4l82fr5p] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.filter-item[b-2t4l82fr5p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-item label[b-2t4l82fr5p] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.input-field[b-2t4l82fr5p] {
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: all var(--transition-fast);
}

.input-field:focus[b-2t4l82fr5p] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-field[b-2t4l82fr5p]::placeholder {
    color: var(--text-tertiary);
}

.filter-actions[b-2t4l82fr5p] {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* ========================================
   按钮样式
   ======================================== */
.btn[b-2t4l82fr5p] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn:disabled[b-2t4l82fr5p] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-2t4l82fr5p] {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-2t4l82fr5p] {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-secondary[b-2t4l82fr5p] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled)[b-2t4l82fr5p] {
    background: var(--border-color);
}

.btn-outline[b-2t4l82fr5p] {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-outline:hover:not(:disabled)[b-2t4l82fr5p] {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* ========================================
   表格卡片
   ======================================== */
.table-card[b-2t4l82fr5p] {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.table-header[b-2t4l82fr5p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.table-title[b-2t4l82fr5p] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.count-badge[b-2t4l82fr5p] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: var(--primary-light);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.table-actions[b-2t4l82fr5p] {
    display: flex;
    gap: 12px;
}

.table-container[b-2t4l82fr5p] {
    overflow-x: auto;
}

.data-table[b-2t4l82fr5p] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-2t4l82fr5p] {
    background: var(--bg-secondary);
}

.data-table th[b-2t4l82fr5p] {
    padding: 14px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.data-table tbody tr[b-2t4l82fr5p] {
    border-bottom: 1px solid var(--border-light);
    transition: background var(--transition-fast);
}

.data-table tbody tr:hover[b-2t4l82fr5p] {
    background: var(--bg-secondary);
}

.data-table td[b-2t4l82fr5p] {
    padding: 16px;
    font-size: 14px;
    color: var(--text-primary);
}

.id-cell[b-2t4l82fr5p],
.title-cell[b-2t4l82fr5p],
.user-id-cell[b-2t4l82fr5p],
.object-id-cell[b-2t4l82fr5p],
.handler-cell[b-2t4l82fr5p] {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.type-badge[b-2t4l82fr5p] {
    display: inline-block;
    padding: 4px 12px;
    background: var(--info-color);
    color: white;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.datetime[b-2t4l82fr5p] {
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.status-badge[b-2t4l82fr5p] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.status-badge.status-pending[b-2t4l82fr5p] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.status-badge.status-processed[b-2t4l82fr5p] {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success-color);
}

.action-buttons[b-2t4l82fr5p] {
    display: flex;
    gap: 8px;
}

.btn-action[b-2t4l82fr5p] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-action svg[b-2t4l82fr5p] {
    flex-shrink: 0;
}

.btn-view[b-2t4l82fr5p] {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info-color);
}

.btn-view:hover[b-2t4l82fr5p] {
    background: var(--info-color);
    color: white;
}

.btn-edit[b-2t4l82fr5p] {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
}

.btn-edit:hover[b-2t4l82fr5p] {
    background: var(--warning-color);
    color: white;
}

/* ========================================
   分页
   ======================================== */
.pagination[b-2t4l82fr5p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-top: 1px solid var(--border-color);
}

.pagination-info[b-2t4l82fr5p] {
    font-size: 14px;
    color: var(--text-secondary);
}

.pagination-controls[b-2t4l82fr5p] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-page[b-2t4l82fr5p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-page:hover:not(:disabled)[b-2t4l82fr5p] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-page:disabled[b-2t4l82fr5p] {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-number[b-2t4l82fr5p] {
    padding: 0 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* ========================================
   空状态
   ======================================== */
.empty-state[b-2t4l82fr5p] {
    text-align: center;
    padding: 80px 20px;
}

.empty-icon[b-2t4l82fr5p] {
    font-size: 64px;
    margin-bottom: 20px;
}

.empty-state h3[b-2t4l82fr5p] {
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.empty-state p[b-2t4l82fr5p] {
    color: var(--text-secondary);
}

/* ========================================
   模态框
   ======================================== */
.modal-overlay[b-2t4l82fr5p] {
    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: 9999;
    animation: fadeIn-b-2t4l82fr5p 0.2s ease;
}

@keyframes fadeIn-b-2t4l82fr5p {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-container[b-2t4l82fr5p] {
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-2t4l82fr5p 0.3s ease;
}

@keyframes slideUp-b-2t4l82fr5p {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-modal[b-2t4l82fr5p] {
    width: 900px;
    max-width: 90vw;
}

.edit-modal[b-2t4l82fr5p] {
    width: 650px;
}

.question-edit-modal[b-2t4l82fr5p] {
    width: 1000px;
    max-width: 95vw;
}

.modal-header[b-2t4l82fr5p] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-2t4l82fr5p] {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.btn-close[b-2t4l82fr5p] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-close:hover[b-2t4l82fr5p] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body[b-2t4l82fr5p] {
    padding: 28px;
    overflow-y: auto;
    max-height: calc(90vh - 160px);
}

.modal-body[b-2t4l82fr5p]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-2t4l82fr5p]::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 4px;
}

.modal-body[b-2t4l82fr5p]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
}

.modal-body[b-2t4l82fr5p]::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

.modal-footer[b-2t4l82fr5p] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 28px;
    border-top: 1px solid var(--border-color);
}

/* ========================================
   详情视图
   ======================================== */
.detail-section[b-2t4l82fr5p] {
    margin-bottom: 24px;
}

.detail-section:last-child[b-2t4l82fr5p] {
    margin-bottom: 0;
}

.section-title[b-2t4l82fr5p] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.detail-row[b-2t4l82fr5p] {
    display: flex;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}

.detail-row:last-child[b-2t4l82fr5p] {
    border-bottom: none;
}

.detail-row.full-width[b-2t4l82fr5p] {
    flex-direction: column;
    gap: 8px;
}

.detail-label[b-2t4l82fr5p] {
    flex-shrink: 0;
    width: 140px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.detail-value[b-2t4l82fr5p] {
    flex: 1;
    font-size: 14px;
    color: var(--text-primary);
    word-break: break-word;
}

.detail-description[b-2t4l82fr5p] {
    padding: 14px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.detail-divider[b-2t4l82fr5p] {
    height: 1px;
    background: var(--border-color);
    margin: 24px 0;
}

/* ========================================
   表单样式
   ======================================== */
.form-section[b-2t4l82fr5p] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row[b-2t4l82fr5p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-2t4l82fr5p] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

.form-label.required[b-2t4l82fr5p]::after {
    content: ' *';
    color: var(--danger-color);
}

.form-value[b-2t4l82fr5p] {
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-primary);
    line-height: 1.6;
}

.form-value.readonly[b-2t4l82fr5p] {
    border: 1px solid var(--border-color);
}

.form-value.scrollable[b-2t4l82fr5p] {
    max-height: 120px;
    overflow-y: auto;
}

.textarea[b-2t4l82fr5p] {
    min-height: 120px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.6;
}

.form-divider[b-2t4l82fr5p] {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

.form-info[b-2t4l82fr5p] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-md);
    font-size: 13px;
    color: var(--info-color);
}

.form-info svg[b-2t4l82fr5p] {
    flex-shrink: 0;
}

/* ========================================
   题目展示样式
   ======================================== */
.question-items[b-2t4l82fr5p] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
}

.question-item-card[b-2t4l82fr5p] {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.question-item-header[b-2t4l82fr5p] {
    padding: 12px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.question-number[b-2t4l82fr5p] {
    font-weight: 600;
    font-size: 14px;
}

.question-content[b-2t4l82fr5p] {
    padding: 16px;
}

.question-text[b-2t4l82fr5p] {
    font-size: 15px;
    color: var(--text-primary);
    line-height: 1.6;
    margin-bottom: 16px;
    font-weight: 500;
}

.choices-list[b-2t4l82fr5p] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.choice-item[b-2t4l82fr5p] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg-primary);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
}

.choice-label[b-2t4l82fr5p] {
    font-weight: 600;
    color: var(--primary-color);
    flex-shrink: 0;
}

.choice-text[b-2t4l82fr5p] {
    color: var(--text-primary);
    line-height: 1.5;
}

.answer-row[b-2t4l82fr5p] {
    display: flex;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(16, 185, 129, 0.1);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.answer-label[b-2t4l82fr5p] {
    font-weight: 600;
    color: var(--success-color);
    flex-shrink: 0;
}

.answer-value[b-2t4l82fr5p] {
    color: var(--success-color);
    font-weight: 600;
}

.analysis-row[b-2t4l82fr5p] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: rgba(59, 130, 246, 0.05);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--info-color);
}

.analysis-label[b-2t4l82fr5p] {
    font-weight: 600;
    color: var(--info-color);
    font-size: 14px;
}

.analysis-value[b-2t4l82fr5p] {
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
}

/* ========================================
   题目编辑样式
   ======================================== */
.question-edit-card[b-2t4l82fr5p] {
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.question-edit-header[b-2t4l82fr5p] {
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--primary-color);
}

.choices-edit[b-2t4l82fr5p] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.choice-edit-row[b-2t4l82fr5p] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.choice-label-edit[b-2t4l82fr5p] {
    font-weight: 600;
    color: var(--primary-color);
    min-width: 30px;
    flex-shrink: 0;
}

.flex-1[b-2t4l82fr5p] {
    flex: 1;
}

.btn-warning[b-2t4l82fr5p] {
    background: var(--warning-color);
    color: white;
}

.btn-warning:hover:not(:disabled)[b-2t4l82fr5p] {
    background: #d97706;
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.section-title[b-2t4l82fr5p] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.section-title svg[b-2t4l82fr5p] {
    color: var(--primary-color);
}

/* ========================================
   响应式设计
   ======================================== */
@media (max-width: 1200px) {
    .filter-grid[b-2t4l82fr5p] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .feedback-management[b-2t4l82fr5p] {
        padding: 20px;
    }

    .stats-row[b-2t4l82fr5p] {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .filter-grid[b-2t4l82fr5p] {
        grid-template-columns: 1fr;
    }

    .filter-actions[b-2t4l82fr5p] {
        flex-direction: column;
    }

    .filter-actions .btn[b-2t4l82fr5p] {
        width: 100%;
        justify-content: center;
    }

    .table-container[b-2t4l82fr5p] {
        overflow-x: scroll;
    }

    .data-table[b-2t4l82fr5p] {
        min-width: 900px;
    }

    .pagination[b-2t4l82fr5p] {
        flex-direction: column;
        gap: 16px;
    }

    .modal-container[b-2t4l82fr5p] {
        max-width: 95vw;
        margin: 20px;
    }

    .view-modal[b-2t4l82fr5p],
    .edit-modal[b-2t4l82fr5p] {
        width: 100%;
    }

    .detail-row[b-2t4l82fr5p] {
        flex-direction: column;
        gap: 8px;
    }

    .detail-label[b-2t4l82fr5p] {
        width: auto;
    }
}

@media (max-width: 480px) {
    .page-title[b-2t4l82fr5p] {
        font-size: 24px;
    }

    .stat-value[b-2t4l82fr5p] {
        font-size: 24px;
    }

    .action-buttons[b-2t4l82fr5p] {
        flex-direction: column;
        gap: 4px;
    }

    .btn-action[b-2t4l82fr5p] {
        width: 100%;
        justify-content: center;
    }
}
/* /Components/Pages/Admin/KeyManagement.razor.rz.scp.css */
/* ========================================
   激活码管理页面样式
   ======================================== */

/* 页面头部样式 */
.page-header[b-tyewl9rnr0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 20px;
}

.header-content[b-tyewl9rnr0] {
    flex: 1;
}

.page-header .btn[b-tyewl9rnr0] {
    flex-shrink: 0;
    align-self: flex-start;
}

.header-actions[b-tyewl9rnr0] {
    display: flex;
    gap: 12px;
}

.stats-grid[b-tyewl9rnr0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.mini-stat-card[b-tyewl9rnr0] {
    background-color: white;
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--border-light);
    transition: all var(--transition-base);
}

.mini-stat-card:hover[b-tyewl9rnr0] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.mini-stat-label[b-tyewl9rnr0] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.mini-stat-value[b-tyewl9rnr0] {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.code-badge[b-tyewl9rnr0] {
    background-color: #f3f4f6;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 13px;
    color: #1f2937;
    font-weight: 500;
}

.usage-badge[b-tyewl9rnr0] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.usage-used[b-tyewl9rnr0] {
    font-weight: 600;
    color: var(--primary-color);
}

.usage-separator[b-tyewl9rnr0] {
    color: var(--text-secondary);
}

.usage-total[b-tyewl9rnr0] {
    color: var(--text-secondary);
}

.action-buttons[b-tyewl9rnr0] {
    display: flex;
    gap: 8px;
    justify-content: flex-start;
}

.btn-icon[b-tyewl9rnr0] {
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-secondary);
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover[b-tyewl9rnr0] {
    background-color: var(--hover-bg);
    color: var(--primary-color);
}

.btn-icon-danger:hover[b-tyewl9rnr0] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.badge[b-tyewl9rnr0] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-block;
}

.badge-success[b-tyewl9rnr0] {
    background-color: rgba(34, 197, 94, 0.1);
    color: #22c55e;
}

.badge-warning[b-tyewl9rnr0] {
    background-color: rgba(251, 191, 36, 0.1);
    color: #f59e0b;
}

.badge-danger[b-tyewl9rnr0] {
    background-color: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.badge-info[b-tyewl9rnr0] {
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.spinner-border[b-tyewl9rnr0] {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    border: 0.25em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border-b-tyewl9rnr0 0.75s linear infinite;
}

@keyframes spinner-border-b-tyewl9rnr0 {
    to {
        transform: rotate(360deg);
    }
}

.text-primary[b-tyewl9rnr0] {
    color: var(--primary-color);
}

.visually-hidden[b-tyewl9rnr0] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* 对话框样式 */
.modal-overlay[b-tyewl9rnr0] {
    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: 20px;
}

.modal-dialog[b-tyewl9rnr0] {
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-dialog-large[b-tyewl9rnr0] {
    max-width: 700px;
}

.modal-header[b-tyewl9rnr0] {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3[b-tyewl9rnr0] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.close-btn[b-tyewl9rnr0] {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all var(--transition-base);
}

.close-btn:hover[b-tyewl9rnr0] {
    background-color: var(--hover-bg);
    color: var(--text-primary);
}

.modal-body[b-tyewl9rnr0] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-tyewl9rnr0] {
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

.form-group[b-tyewl9rnr0] {
    margin-bottom: 20px;
}

.form-group label[b-tyewl9rnr0] {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 14px;
}

.form-control[b-tyewl9rnr0] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: all var(--transition-base);
}

.form-control:focus[b-tyewl9rnr0] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-row[b-tyewl9rnr0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.required[b-tyewl9rnr0] {
    color: #ef4444;
}

.tags-display[b-tyewl9rnr0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 32px;
}

.tag[b-tyewl9rnr0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.tag button[b-tyewl9rnr0] {
    background: none;
    border: none;
    color: #3b82f6;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transition: all var(--transition-base);
}

.tag button:hover[b-tyewl9rnr0] {
    background-color: rgba(59, 130, 246, 0.2);
}

.input-group[b-tyewl9rnr0] {
    display: flex;
    gap: 8px;
}

.input-group .form-control[b-tyewl9rnr0] {
    flex: 1;
}

.radio-group[b-tyewl9rnr0] {
    display: flex;
    gap: 20px;
}

.radio-group label[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: normal;
}

.detail-grid[b-tyewl9rnr0] {
    display: grid;
    gap: 16px;
}

.detail-item[b-tyewl9rnr0] {
    display: flex;
    gap: 12px;
}

.detail-item.full-width[b-tyewl9rnr0] {
    flex-direction: column;
}

.detail-label[b-tyewl9rnr0] {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 120px;
}

.text-muted[b-tyewl9rnr0] {
    color: var(--text-secondary);
}

.form-text[b-tyewl9rnr0] {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* 搜索筛选卡片 */
.search-filter-card[b-tyewl9rnr0] {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 24px;
    overflow: hidden;
    border: 1px solid #f3f4f6;
}

.search-filter-body[b-tyewl9rnr0] {
    padding: 20px;
}

/* 基础搜索区域 */
.filter-basic-section[b-tyewl9rnr0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-basic-row[b-tyewl9rnr0] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.filter-basic-item[b-tyewl9rnr0] {
    flex: 0 0 auto;
}

.filter-basic-item-main[b-tyewl9rnr0] {
    flex: 1;
    min-width: 0;
}

.filter-input-wrapper[b-tyewl9rnr0] {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon[b-tyewl9rnr0] {
    position: absolute;
    left: 14px;
    color: #9ca3af;
    pointer-events: none;
}

.filter-input-basic[b-tyewl9rnr0] {
    width: 100%;
    padding: 12px 14px 12px 44px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    color: var(--text-primary);
    background: white;
    transition: all 0.2s ease;
    outline: none;
}

.filter-input-basic:hover[b-tyewl9rnr0] {
    border-color: #d1d5db;
}

.filter-input-basic:focus[b-tyewl9rnr0] {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.filter-input-basic[b-tyewl9rnr0]::placeholder {
    color: #9ca3af;
}

.btn-search-basic[b-tyewl9rnr0] {
    min-width: 110px;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
    white-space: nowrap;
}

.btn-search-basic:hover[b-tyewl9rnr0] {
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
    transform: translateY(-1px);
}

.btn-toggle-advanced[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn-toggle-advanced:hover[b-tyewl9rnr0] {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.btn-toggle-advanced.active[b-tyewl9rnr0] {
    border-color: #667eea;
    color: #667eea;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
}

.chevron-icon[b-tyewl9rnr0] {
    transition: transform 0.3s ease;
}

.btn-toggle-advanced.active .chevron-icon[b-tyewl9rnr0] {
    transform: rotate(180deg);
}

/* 已应用筛选条件提示栏 */
.active-filters-bar[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
    border-radius: 8px;
    border: 1px solid rgba(102, 126, 234, 0.2);
}

.active-filters-badge[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #667eea;
}

.btn-clear-filters[b-tyewl9rnr0] {
    background: white;
    border: 1px solid #e5e7eb;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-clear-filters:hover[b-tyewl9rnr0] {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #ef4444;
}

/* 高级筛选区域 */
.filter-advanced-section[b-tyewl9rnr0] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.filter-advanced-section.show[b-tyewl9rnr0] {
    max-height: 1000px;
    opacity: 1;
    margin-top: 20px;
}

.filter-advanced-divider[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    text-align: center;
}

.filter-advanced-divider[b-tyewl9rnr0]::before,
.filter-advanced-divider[b-tyewl9rnr0]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, #e5e7eb, transparent);
}

.filter-advanced-divider span[b-tyewl9rnr0] {
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.filter-row[b-tyewl9rnr0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.filter-row:last-of-type[b-tyewl9rnr0] {
    margin-bottom: 20px;
}

.filter-item[b-tyewl9rnr0] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-item-large[b-tyewl9rnr0] {
    grid-column: span 2;
}

@media (max-width: 1024px) {
    .filter-item-large[b-tyewl9rnr0] {
        grid-column: span 1;
    }
}

.filter-label[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.filter-label svg[b-tyewl9rnr0] {
    color: #9ca3af;
    flex-shrink: 0;
}

.filter-input[b-tyewl9rnr0],
.filter-select[b-tyewl9rnr0] {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-primary);
    background: white;
    transition: all var(--transition-base);
    outline: none;
}

.filter-input:hover[b-tyewl9rnr0],
.filter-select:hover[b-tyewl9rnr0] {
    border-color: #d1d5db;
}

.filter-input:focus[b-tyewl9rnr0],
.filter-select:focus[b-tyewl9rnr0] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-input[b-tyewl9rnr0]::placeholder {
    color: #9ca3af;
}

.filter-select[b-tyewl9rnr0] {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.filter-advanced-actions[b-tyewl9rnr0] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f3f4f6;
}

.btn-sm[b-tyewl9rnr0] {
    padding: 8px 16px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 分页样式 */
.pagination-wrapper[b-tyewl9rnr0] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 20px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-top: 1px solid #e5e7eb;
}

.pagination-info-section[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-stats[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6b7280;
}

.stats-text[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.stats-text strong[b-tyewl9rnr0] {
    color: #1f2937;
    font-weight: 600;
}

.stats-divider[b-tyewl9rnr0] {
    color: #d1d5db;
}

.page-size-selector[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #6b7280;
}

.page-size-select[b-tyewl9rnr0] {
    padding: 6px 32px 6px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    color: #1f2937;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 14px;
}

.page-size-select:hover[b-tyewl9rnr0] {
    border-color: #667eea;
}

.page-size-select:focus[b-tyewl9rnr0] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.pagination-controls[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.page-nav-btn[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.page-nav-btn:hover:not(:disabled)[b-tyewl9rnr0] {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.page-nav-btn:disabled[b-tyewl9rnr0] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-nav-first[b-tyewl9rnr0],
.page-nav-last[b-tyewl9rnr0] {
    padding: 10px 12px;
}

.nav-text[b-tyewl9rnr0] {
    display: inline;
}

.page-numbers[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 8px;
}

.page-number-btn[b-tyewl9rnr0] {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-number-btn:hover[b-tyewl9rnr0] {
    border-color: #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.page-number-btn.active[b-tyewl9rnr0] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.page-ellipsis[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    color: #9ca3af;
    font-weight: 600;
    letter-spacing: 2px;
}

.page-jumper[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #6b7280;
}

.page-jump-input[b-tyewl9rnr0] {
    width: 70px;
    padding: 8px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    text-align: center;
    transition: all 0.2s ease;
}

.page-jump-input:hover[b-tyewl9rnr0] {
    border-color: #d1d5db;
}

.page-jump-input:focus[b-tyewl9rnr0] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.page-jump-input[b-tyewl9rnr0]::placeholder {
    color: #9ca3af;
}

.page-jump-btn[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.page-jump-btn:hover[b-tyewl9rnr0] {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
}

.page-jump-btn:active[b-tyewl9rnr0] {
    transform: translateY(0);
}

/* 响应式优化 */
@media (max-width: 1024px) {
    .filter-basic-row[b-tyewl9rnr0] {
        flex-wrap: wrap;
    }

    .filter-basic-item[b-tyewl9rnr0] {
        flex: 1 1 calc(50% - 6px);
        min-width: 200px;
    }

    .filter-basic-item-main[b-tyewl9rnr0] {
        flex: 1 1 100%;
    }

    .btn-search-basic[b-tyewl9rnr0],
    .btn-toggle-advanced[b-tyewl9rnr0] {
        flex: 1 1 calc(50% - 6px);
    }
}

@media (max-width: 768px) {
    .filter-row[b-tyewl9rnr0] {
        grid-template-columns: 1fr;
    }

    .filter-item-large[b-tyewl9rnr0] {
        grid-column: span 1;
    }

    .search-filter-body[b-tyewl9rnr0] {
        padding: 16px;
    }

    .filter-basic-row[b-tyewl9rnr0] {
        flex-direction: column;
    }

    .filter-basic-item[b-tyewl9rnr0],
    .filter-basic-item-main[b-tyewl9rnr0],
    .btn-search-basic[b-tyewl9rnr0],
    .btn-toggle-advanced[b-tyewl9rnr0] {
        flex: 1 1 100%;
        width: 100%;
    }

    .active-filters-bar[b-tyewl9rnr0] {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .btn-clear-filters[b-tyewl9rnr0] {
        justify-content: center;
    }

    .filter-advanced-actions[b-tyewl9rnr0] {
        flex-direction: column;
    }

    .btn-sm[b-tyewl9rnr0] {
        width: 100%;
        justify-content: center;
    }

    .pagination-wrapper[b-tyewl9rnr0] {
        padding: 20px 16px;
    }

    .pagination-info-section[b-tyewl9rnr0] {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-stats[b-tyewl9rnr0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .stats-divider[b-tyewl9rnr0] {
        display: none;
    }

    .page-size-selector[b-tyewl9rnr0] {
        justify-content: space-between;
    }

    .pagination-controls[b-tyewl9rnr0] {
        flex-wrap: wrap;
        gap: 8px;
    }

    .page-nav-btn[b-tyewl9rnr0] {
        flex: 0 0 auto;
    }

    .nav-text[b-tyewl9rnr0] {
        display: none;
    }

    .page-nav-first[b-tyewl9rnr0],
    .page-nav-last[b-tyewl9rnr0] {
        order: -1;
    }

    .page-numbers[b-tyewl9rnr0] {
        order: 0;
        margin: 0;
    }

    .page-number-btn[b-tyewl9rnr0] {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 13px;
    }

    .page-jumper[b-tyewl9rnr0] {
        width: 100%;
        justify-content: center;
        padding-top: 12px;
        border-top: 1px solid #e5e7eb;
    }

    .page-header[b-tyewl9rnr0] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header .btn[b-tyewl9rnr0] {
        align-self: stretch;
    }
}

/* ========================================
   日期快捷按钮
   ======================================== */
.date-shortcuts[b-tyewl9rnr0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-shortcut[b-tyewl9rnr0] {
    padding: 6px 16px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-shortcut:hover[b-tyewl9rnr0] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(102, 126, 234, 0.05);
}

.btn-shortcut:active[b-tyewl9rnr0] {
    transform: translateY(1px);
}

/* ========================================
   警告提示框
   ======================================== */
.alert[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.alert-info[b-tyewl9rnr0] {
    background-color: #e3f2fd;
    border: 1px solid #90caf9;
    color: #1976d2;
}

.alert-warning[b-tyewl9rnr0] {
    background-color: #fff3e0;
    border: 1px solid #ffb74d;
    color: #f57c00;
}

.alert svg[b-tyewl9rnr0] {
    flex-shrink: 0;
}

/* ========================================
   模态框样式
   ======================================== */
.modal-overlay[b-tyewl9rnr0] {
    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: 10000;
    animation: fadeIn-b-tyewl9rnr0 0.2s ease-out;
    overflow-y: auto;
    padding: 20px;
}

.modal-dialog[b-tyewl9rnr0] {
    position: relative;
    background: white;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    animation: slideUp-b-tyewl9rnr0 0.3s ease-out;
    margin: auto;
    pointer-events: auto;
}

.modal-dialog-large[b-tyewl9rnr0] {
    max-width: 800px;
}

.modal-header[b-tyewl9rnr0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3[b-tyewl9rnr0] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.close-btn[b-tyewl9rnr0] {
    background: none;
    border: none;
    font-size: 28px;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
    line-height: 1;
    padding: 0;
}

.close-btn:hover[b-tyewl9rnr0] {
    background-color: #f3f4f6;
    color: var(--text-primary);
}

.modal-body[b-tyewl9rnr0] {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.modal-footer[b-tyewl9rnr0] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
}

.form-group[b-tyewl9rnr0] {
    margin-bottom: 20px;
}

.form-group label[b-tyewl9rnr0] {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.form-group .required[b-tyewl9rnr0] {
    color: #ef4444;
}

.form-control[b-tyewl9rnr0] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s;
    background-color: white;
}

.form-control:focus[b-tyewl9rnr0] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-control:disabled[b-tyewl9rnr0] {
    background-color: #f3f4f6;
    cursor: not-allowed;
}

.form-text[b-tyewl9rnr0] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}

.form-row[b-tyewl9rnr0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.tags-display[b-tyewl9rnr0] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.tag[b-tyewl9rnr0] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background-color: #e0e7ff;
    color: #4c51bf;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
}

.tag button[b-tyewl9rnr0] {
    background: none;
    border: none;
    color: #4c51bf;
    font-size: 18px;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    line-height: 1;
}

.tag button:hover[b-tyewl9rnr0] {
    background-color: rgba(76, 81, 191, 0.2);
}

/* ========================================
   动画关键帧
   ======================================== */
@keyframes fadeIn-b-tyewl9rnr0 {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-tyewl9rnr0 {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   批量创建进度和日志样式
   ======================================== */

/* 进度容器样式 */
.progress-container[b-tyewl9rnr0] {
    padding: 24px;
    background: white;
}

.progress-header[b-tyewl9rnr0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
}

.progress-header h4[b-tyewl9rnr0] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-stats[b-tyewl9rnr0] {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.stat-item[b-tyewl9rnr0] {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
}

.stat-total[b-tyewl9rnr0] {
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
}

.stat-success[b-tyewl9rnr0] {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.stat-failed[b-tyewl9rnr0] {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.stat-progress[b-tyewl9rnr0] {
    color: #f59e0b;
    background: rgba(251, 146, 60, 0.1);
}

/* 进度条样式 */
.progress-bar-wrapper[b-tyewl9rnr0] {
    margin-bottom: 24px;
    position: relative;
}

.progress-bar[b-tyewl9rnr0] {
    height: 32px;
    background: #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.progress-bar-fill[b-tyewl9rnr0] {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #3b82f6);
    transition: width 0.3s ease;
    position: relative;
    overflow: hidden;
}

.progress-bar-fill[b-tyewl9rnr0]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer-b-tyewl9rnr0 2s infinite;
}

@keyframes shimmer-b-tyewl9rnr0 {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.progress-text[b-tyewl9rnr0] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

/* 日志容器样式 */
.log-container[b-tyewl9rnr0] {
    margin-bottom: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.log-header[b-tyewl9rnr0] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
}

.btn-clear-log[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
}

.btn-clear-log:hover:not(:disabled)[b-tyewl9rnr0] {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

.btn-clear-log:disabled[b-tyewl9rnr0] {
    opacity: 0.5;
    cursor: not-allowed;
}

.log-content[b-tyewl9rnr0] {
    max-height: 400px;
    overflow-y: auto;
    padding: 12px;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    background: #fafafa;
}

.log-entry[b-tyewl9rnr0] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    margin-bottom: 4px;
    border-radius: 4px;
    transition: background 0.2s;
    background: white;
}

.log-entry:hover[b-tyewl9rnr0] {
    background: #f3f4f6;
}

.log-time[b-tyewl9rnr0] {
    color: #6b7280;
    font-size: 11px;
    flex-shrink: 0;
    min-width: 60px;
    font-weight: 500;
}

.log-icon[b-tyewl9rnr0] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 2px;
}

.log-message[b-tyewl9rnr0] {
    flex: 1;
    word-break: break-all;
    color: #1f2937;
}

.log-success[b-tyewl9rnr0] {
    border-left: 3px solid #22c55e;
    background: rgba(34, 197, 94, 0.05);
}

.log-success .log-icon[b-tyewl9rnr0] {
    color: #22c55e;
}

.log-error[b-tyewl9rnr0] {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.05);
}

.log-error .log-icon[b-tyewl9rnr0] {
    color: #ef4444;
}

.log-error .log-message[b-tyewl9rnr0] {
    color: #dc2626;
}

.log-info[b-tyewl9rnr0] {
    border-left: 3px solid #3b82f6;
    background: rgba(59, 130, 246, 0.05);
}

.log-info .log-icon[b-tyewl9rnr0] {
    color: #3b82f6;
}

/* 结果摘要样式 */
.result-summary[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    border-radius: 8px;
    border: 2px solid;
    margin-top: 24px;
}

.result-success[b-tyewl9rnr0] {
    background: rgba(34, 197, 94, 0.05);
    border-color: #22c55e;
}

.result-error[b-tyewl9rnr0] {
    background: rgba(239, 68, 68, 0.05);
    border-color: #ef4444;
}

.result-warning[b-tyewl9rnr0] {
    background: rgba(251, 146, 60, 0.05);
    border-color: #f59e0b;
}

.result-icon[b-tyewl9rnr0] {
    flex-shrink: 0;
}

.result-success .result-icon[b-tyewl9rnr0] {
    color: #22c55e;
}

.result-error .result-icon[b-tyewl9rnr0] {
    color: #ef4444;
}

.result-warning .result-icon[b-tyewl9rnr0] {
    color: #f59e0b;
}

.result-content h4[b-tyewl9rnr0] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
}

.result-success .result-content h4[b-tyewl9rnr0] {
    color: #22c55e;
}

.result-error .result-content h4[b-tyewl9rnr0] {
    color: #ef4444;
}

.result-warning .result-content h4[b-tyewl9rnr0] {
    color: #f59e0b;
}

.result-content p[b-tyewl9rnr0] {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
}

/* 滚动条样式 */
.log-content[b-tyewl9rnr0]::-webkit-scrollbar {
    width: 8px;
}

.log-content[b-tyewl9rnr0]::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.log-content[b-tyewl9rnr0]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.log-content[b-tyewl9rnr0]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* 响应式优化 - 进度和日志 */
@media (max-width: 768px) {
    .progress-container[b-tyewl9rnr0] {
        padding: 16px;
    }

    .progress-header[b-tyewl9rnr0] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .progress-stats[b-tyewl9rnr0] {
        width: 100%;
        justify-content: space-between;
    }

    .stat-item[b-tyewl9rnr0] {
        font-size: 12px;
        padding: 4px 8px;
    }

    .progress-bar[b-tyewl9rnr0] {
        height: 24px;
    }

    .progress-text[b-tyewl9rnr0] {
        font-size: 12px;
    }

    .log-content[b-tyewl9rnr0] {
        max-height: 300px;
        font-size: 12px;
        padding: 8px;
    }

    .log-entry[b-tyewl9rnr0] {
        padding: 6px 8px;
        gap: 8px;
    }

    .log-time[b-tyewl9rnr0] {
        font-size: 10px;
        min-width: 50px;
    }

    .result-summary[b-tyewl9rnr0] {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .result-content h4[b-tyewl9rnr0] {
        font-size: 16px;
    }

    .result-content p[b-tyewl9rnr0] {
        font-size: 13px;
    }

    .date-range-wrapper[b-tyewl9rnr0] {
        flex-direction: column;
    }

    .date-inputs[b-tyewl9rnr0] {
        flex-direction: column;
        gap: 12px;
    }

    .date-separator[b-tyewl9rnr0] {
        display: none;
    }

    .date-input-group[b-tyewl9rnr0] {
        width: 100%;
    }

    .btn-date-shortcut[b-tyewl9rnr0] {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* ========================================
   日期范围选择器样式
   ======================================== */
.date-range-wrapper[b-tyewl9rnr0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.date-shortcuts[b-tyewl9rnr0] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.btn-date-shortcut[b-tyewl9rnr0] {
    padding: 6px 16px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-date-shortcut:hover[b-tyewl9rnr0] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(102, 126, 234, 0.05);
}

.btn-date-shortcut.active[b-tyewl9rnr0] {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
}

.btn-date-shortcut:active[b-tyewl9rnr0] {
    transform: translateY(1px);
}

.date-inputs[b-tyewl9rnr0] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.date-input-group[b-tyewl9rnr0] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.date-input-label[b-tyewl9rnr0] {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

.filter-input-date[b-tyewl9rnr0] {
    width: 100%;
}

.date-separator[b-tyewl9rnr0] {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 20px;
    font-weight: 500;
}

.filter-item-large[b-tyewl9rnr0] {
    grid-column: 1 / -1;
}
/* /Components/Pages/Admin/PermissionManagement.razor.rz.scp.css */
/* 权限管理页面样式 - 现代化扁平设计 */

.permission-page[b-5foymgx84t] {
    padding: 24px;
    background: #f8f9fa;
    min-height: 100vh;
}

/* ==================== 页面头部 ==================== */
.page-header[b-5foymgx84t] {
    margin-bottom: 24px;
}

.header-content[b-5foymgx84t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-title[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-title svg[b-5foymgx84t] {
    color: #667eea;
}

.header-title h1[b-5foymgx84t] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
}

.header-title p[b-5foymgx84t] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #6c757d;
}

/* ==================== 按钮样式 ==================== */
.btn-primary[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover[b-5foymgx84t] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-primary:active[b-5foymgx84t] {
    transform: translateY(0);
}

.btn-primary:disabled[b-5foymgx84t] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-secondary:hover[b-5foymgx84t] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.btn-text[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    color: #6c757d;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-text:hover[b-5foymgx84t] {
    background: #f8f9fa;
    color: #495057;
}

.btn-danger[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
}

.btn-danger:hover[b-5foymgx84t] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(245, 87, 108, 0.4);
}

.btn-danger:disabled[b-5foymgx84t] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-icon[b-5foymgx84t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon svg[b-5foymgx84t] {
    width: 16px;
    height: 16px;
}

.btn-edit[b-5foymgx84t] {
    color: #667eea;
}

.btn-edit:hover[b-5foymgx84t] {
    background: rgba(102, 126, 234, 0.1);
}

.btn-delete[b-5foymgx84t] {
    color: #f5576c;
}

.btn-delete:hover[b-5foymgx84t] {
    background: rgba(245, 87, 108, 0.1);
}

.btn-close[b-5foymgx84t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: #6c757d;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-close:hover[b-5foymgx84t] {
    background: #f8f9fa;
    color: #495057;
}

/* ==================== 搜索和筛选区域 ==================== */
.filter-section[b-5foymgx84t] {
    margin-bottom: 24px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-row[b-5foymgx84t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-group[b-5foymgx84t] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-group svg[b-5foymgx84t] {
    position: absolute;
    left: 16px;
    color: #adb5bd;
}

.search-group input[b-5foymgx84t] {
    width: 100%;
    padding: 12px 12px 12px 48px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-group input:focus[b-5foymgx84t] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-inputs[b-5foymgx84t] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-input[b-5foymgx84t] {
    flex: 1;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.filter-input:focus[b-5foymgx84t] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ==================== 统计卡片 ==================== */
.stats-grid[b-5foymgx84t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.stat-card:hover[b-5foymgx84t] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-icon[b-5foymgx84t] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    color: white;
}

.stat-content[b-5foymgx84t] {
    flex: 1;
}

.stat-value[b-5foymgx84t] {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label[b-5foymgx84t] {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

/* ==================== 数据卡片和表格 ==================== */
.data-card[b-5foymgx84t] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table-container[b-5foymgx84t] {
    overflow-x: auto;
}

.data-table[b-5foymgx84t] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-5foymgx84t] {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.data-table th[b-5foymgx84t] {
    padding: 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr[b-5foymgx84t] {
    border-bottom: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.data-table tbody tr:hover[b-5foymgx84t] {
    background: #f8f9fa;
}

.data-table tbody tr:last-child[b-5foymgx84t] {
    border-bottom: none;
}

.data-table td[b-5foymgx84t] {
    padding: 16px;
    font-size: 14px;
    color: #495057;
}

.user-id[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: #495057;
}

.user-id svg[b-5foymgx84t] {
    color: #6c757d;
}

.permission-badge[b-5foymgx84t] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.order-no[b-5foymgx84t] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: #6c757d;
}

.date-text[b-5foymgx84t] {
    font-size: 13px;
    color: #6c757d;
}

.status-badge[b-5foymgx84t] {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.status-active[b-5foymgx84t] {
    background: #d4edda;
    color: #155724;
}

.status-expired[b-5foymgx84t] {
    background: #f8d7da;
    color: #721c24;
}

.action-buttons[b-5foymgx84t] {
    display: flex;
    gap: 4px;
}

.text-muted[b-5foymgx84t] {
    color: #adb5bd;
}

/* ==================== 空状态 ==================== */
.empty-state[b-5foymgx84t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-state svg[b-5foymgx84t] {
    color: #dee2e6;
    margin-bottom: 16px;
}

.empty-state h3[b-5foymgx84t] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #495057;
}

.empty-state p[b-5foymgx84t] {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
}

/* ==================== 加载状态 ==================== */
.loading-container[b-5foymgx84t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.spinner[b-5foymgx84t] {
    width: 48px;
    height: 48px;
    border: 4px solid #e9ecef;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-5foymgx84t 1s linear infinite;
}

@keyframes spin-b-5foymgx84t {
    to { transform: rotate(360deg); }
}

.spinner-sm[b-5foymgx84t] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-5foymgx84t 0.8s linear infinite;
    margin-right: 8px;
}

.loading-container p[b-5foymgx84t] {
    margin-top: 16px;
    font-size: 14px;
    color: #6c757d;
}

/* ==================== 分页 ==================== */
.pagination-container[b-5foymgx84t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-top: 1px solid #e9ecef;
}

.pagination-info[b-5foymgx84t] {
    font-size: 14px;
    color: #6c757d;
}

.pagination[b-5foymgx84t] {
    display: flex;
    gap: 8px;
}

.page-btn[b-5foymgx84t] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background: white;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled):not(.active)[b-5foymgx84t] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.page-btn.active[b-5foymgx84t] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
}

.page-btn:disabled[b-5foymgx84t] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==================== 模态框 ==================== */
.modal-overlay[b-5foymgx84t] {
    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;
    animation: fadeIn-b-5foymgx84t 0.2s ease;
}

@keyframes fadeIn-b-5foymgx84t {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-content[b-5foymgx84t] {
    width: 100%;
    max-width: 600px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp-b-5foymgx84t 0.3s ease;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-small[b-5foymgx84t] {
    max-width: 400px;
}

@keyframes slideUp-b-5foymgx84t {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header[b-5foymgx84t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid #e9ecef;
}

.modal-header h2[b-5foymgx84t] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

.modal-body[b-5foymgx84t] {
    padding: 24px;
    overflow-y: auto;
}

.modal-footer[b-5foymgx84t] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid #e9ecef;
}

/* ==================== 表单样式 ==================== */
.form-group[b-5foymgx84t] {
    margin-bottom: 20px;
}

.form-group label[b-5foymgx84t] {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

/* 过期时间快捷选择 */
.expiry-quick-select[b-5foymgx84t] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.quick-tag[b-5foymgx84t] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: white;
    color: #495057;
    border: 1.5px solid #dee2e6;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.quick-tag svg[b-5foymgx84t] {
    flex-shrink: 0;
}

.quick-tag:hover[b-5foymgx84t] {
    border-color: #667eea;
    background: #f8f9ff;
    color: #667eea;
    transform: translateY(-1px);
}

.quick-tag.active[b-5foymgx84t] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    transform: translateY(-2px);
}

.quick-tag.active:hover[b-5foymgx84t] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.quick-tag.active svg[b-5foymgx84t] {
    color: white;
}

.required[b-5foymgx84t] {
    color: #f5576c;
    margin-left: 4px;
}

.form-input[b-5foymgx84t],
.form-textarea[b-5foymgx84t] {
    width: 100%;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-input:focus[b-5foymgx84t],
.form-textarea:focus[b-5foymgx84t] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-input:disabled[b-5foymgx84t] {
    background: #f8f9fa;
    color: #6c757d;
    cursor: not-allowed;
}

.form-textarea[b-5foymgx84t] {
    resize: vertical;
    font-family: 'Consolas', 'Monaco', monospace;
}

.form-hint[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
    color: #6c757d;
}

.form-hint svg[b-5foymgx84t] {
    flex-shrink: 0;
}

/* ==================== 警告提示 ==================== */
.alert[b-5foymgx84t] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 14px;
}

.alert svg[b-5foymgx84t] {
    flex-shrink: 0;
    margin-top: 2px;
}

.alert-error[b-5foymgx84t] {
    background: #fff5f5;
    color: #c53030;
    border: 1px solid #feb2b2;
}

/* ==================== 进度面板 ==================== */
.modal-content.saving[b-5foymgx84t] {
    pointer-events: auto;
}

.progress-panel[b-5foymgx84t] {
    padding: 24px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 2px solid rgba(102, 126, 234, 0.2);
    border-radius: 12px;
}

.progress-header[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.progress-header h3[b-5foymgx84t] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #667eea;
}

.spinner-icon[b-5foymgx84t] {
    color: #667eea;
    animation: rotate-b-5foymgx84t 2s linear infinite;
}

@keyframes rotate-b-5foymgx84t {
    100% { transform: rotate(360deg); }
}

.progress-stats[b-5foymgx84t] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.stat-item[b-5foymgx84t] {
    text-align: center;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 2px solid #e9ecef;
}

.stat-value[b-5foymgx84t] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label[b-5foymgx84t] {
    font-size: 12px;
    color: #6c757d;
    font-weight: 500;
}

.stat-total .stat-value[b-5foymgx84t] { color: #495057; }
.stat-processing .stat-value[b-5foymgx84t] { color: #667eea; }
.stat-success .stat-value[b-5foymgx84t] { color: #28a745; }
.stat-failed .stat-value[b-5foymgx84t] { color: #dc3545; }
.stat-notfound .stat-value[b-5foymgx84t] { color: #ffc107; }

.progress-bar-container[b-5foymgx84t] {
    height: 8px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar[b-5foymgx84t] {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
    border-radius: 4px;
}

.progress-text[b-5foymgx84t] {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #667eea;
    margin-bottom: 16px;
}

.current-processing[b-5foymgx84t] {
    padding: 12px;
    background: white;
    border-left: 4px solid #667eea;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
}

.current-processing span[b-5foymgx84t] {
    color: #6c757d;
}

.current-processing strong[b-5foymgx84t] {
    color: #667eea;
    font-family: 'Consolas', 'Monaco', monospace;
}

.notfound-users[b-5foymgx84t] {
    padding: 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
}

.notfound-header[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    color: #856404;
}

.notfound-header svg[b-5foymgx84t] {
    color: #ffc107;
}

.notfound-list[b-5foymgx84t] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.notfound-tag[b-5foymgx84t] {
    display: inline-flex;
    padding: 4px 10px;
    background: white;
    border: 1px solid #ffc107;
    border-radius: 6px;
    font-size: 12px;
    font-family: 'Consolas', 'Monaco', monospace;
    color: #856404;
    font-weight: 500;
}

/* ==================== 确认对话框 ==================== */
.confirm-message[b-5foymgx84t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 0;
}

.confirm-message svg[b-5foymgx84t] {
    color: #f5576c;
    margin-bottom: 16px;
}

.confirm-message p[b-5foymgx84t] {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #495057;
}

.confirm-message strong[b-5foymgx84t] {
    color: #1a1a1a;
    font-weight: 600;
}

/* ==================== 权限选择器 ==================== */
.permission-selector[b-5foymgx84t] {
    max-height: 450px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px;
    background: #f8f9fa;
}

.permission-group[b-5foymgx84t] {
    margin-bottom: 12px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.permission-group:last-child[b-5foymgx84t] {
    margin-bottom: 0;
}

.permission-group.collapsed[b-5foymgx84t] {
    border-color: #e9ecef;
}

.permission-group.expanded[b-5foymgx84t] {
    border-color: #667eea;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
}

.group-header[b-5foymgx84t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    background: white;
}

.group-header:hover[b-5foymgx84t] {
    background: #f8f9fa;
}

.permission-group.expanded .group-header[b-5foymgx84t] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-bottom: 1px solid #e9ecef;
}

.group-header-left[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.expand-icon[b-5foymgx84t] {
    transition: transform 0.3s ease;
    color: #6c757d;
    flex-shrink: 0;
}

.permission-group.expanded .expand-icon[b-5foymgx84t] {
    transform: rotate(90deg);
    color: #667eea;
}

.group-title[b-5foymgx84t] {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
}

.group-count[b-5foymgx84t] {
    font-size: 13px;
    color: #6c757d;
    font-weight: 500;
    background: #f8f9fa;
    padding: 2px 8px;
    border-radius: 12px;
}

.permission-group.expanded .group-count[b-5foymgx84t] {
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
}

.group-checkbox[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.group-checkbox:hover[b-5foymgx84t] {
    border-color: #667eea;
    background: #f8f9ff;
}

.group-checkbox input[type="checkbox"][b-5foymgx84t] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #667eea;
    margin: 0;
}

.checkbox-label[b-5foymgx84t] {
    font-size: 13px;
    font-weight: 500;
    color: #495057;
}

.permission-items[b-5foymgx84t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
    padding: 16px;
    background: #fafbfc;
    animation: slideDown-b-5foymgx84t 0.3s ease;
}

@keyframes slideDown-b-5foymgx84t {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 选中权限摘要 */
.selected-permissions-summary[b-5foymgx84t] {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
}

.summary-header[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
}

.summary-header svg[b-5foymgx84t] {
    color: #667eea;
}

.summary-tags[b-5foymgx84t] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.permission-tag[b-5foymgx84t] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: white;
    border: 1px solid #667eea;
    border-radius: 6px;
    font-size: 12px;
    color: #667eea;
    font-weight: 500;
    transition: all 0.2s ease;
}

.permission-tag:hover[b-5foymgx84t] {
    background: #667eea;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.permission-checkbox[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.permission-checkbox:hover[b-5foymgx84t] {
    border-color: #667eea;
    background: #f8f9ff;
}

.permission-checkbox input[type="checkbox"][b-5foymgx84t] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #667eea;
    flex-shrink: 0;
}

.permission-checkbox input[type="checkbox"]:checked + .permission-text[b-5foymgx84t] {
    color: #667eea;
    font-weight: 500;
}

.permission-text[b-5foymgx84t] {
    font-size: 13px;
    color: #495057;
    line-height: 1.4;
    transition: all 0.2s ease;
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
    .permission-page[b-5foymgx84t] {
        padding: 16px;
    }

    .header-content[b-5foymgx84t] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .header-title[b-5foymgx84t] {
        width: 100%;
    }

    .btn-primary[b-5foymgx84t] {
        width: 100%;
        justify-content: center;
    }

    .filter-inputs[b-5foymgx84t] {
        flex-direction: column;
    }

    .filter-input[b-5foymgx84t] {
        width: 100%;
    }

    .stats-grid[b-5foymgx84t] {
        grid-template-columns: 1fr;
    }

    .table-container[b-5foymgx84t] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table[b-5foymgx84t] {
        min-width: 800px;
    }

    .pagination-container[b-5foymgx84t] {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .modal-content[b-5foymgx84t] {
        margin: 0;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .header-title h1[b-5foymgx84t] {
        font-size: 22px;
    }

    .stat-value[b-5foymgx84t] {
        font-size: 24px;
    }

    .data-table th[b-5foymgx84t],
    .data-table td[b-5foymgx84t] {
        padding: 12px;
        font-size: 13px;
    }
}

/* ==================== 批量查询选项卡 ==================== */
.batch-query-section[b-5foymgx84t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.batch-query-tabs[b-5foymgx84t] {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
}

.batch-tab[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    bottom: -10px;
}

.batch-tab:hover[b-5foymgx84t] {
    color: #495057;
    background: rgba(102, 126, 234, 0.05);
}

.batch-tab.active[b-5foymgx84t] {
    color: #667eea;
    border-bottom-color: #667eea;
    font-weight: 600;
}

.batch-tab svg[b-5foymgx84t] {
    flex-shrink: 0;
}

.batch-input-row[b-5foymgx84t] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.batch-textarea[b-5foymgx84t] {
    flex: 1;
    padding: 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 13px;
    font-family: 'Consolas', 'Monaco', monospace;
    line-height: 1.6;
    resize: vertical;
    min-height: 120px;
    transition: all 0.2s ease;
}

.batch-textarea:focus[b-5foymgx84t] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.batch-textarea:disabled[b-5foymgx84t] {
    background: #f8f9fa;
    color: #adb5bd;
    cursor: not-allowed;
}

.batch-actions[b-5foymgx84t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 140px;
}

/* ==================== 批量操作栏 ==================== */
.batch-actions-bar[b-5foymgx84t] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    margin-bottom: 12px;
}

.selection-info[b-5foymgx84t] {
    font-size: 14px;
    color: #495057;
}

.selection-info .selected-count[b-5foymgx84t] {
    font-weight: 500;
}

.selection-info strong[b-5foymgx84t] {
    color: #667eea;
    font-weight: 700;
}

.batch-buttons[b-5foymgx84t] {
    display: flex;
    gap: 8px;
}

.btn-danger-outline[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: #f5576c;
    border: 1.5px solid #f5576c;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-danger-outline:hover:not(:disabled)[b-5foymgx84t] {
    background: #f5576c;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.3);
}

.btn-danger-outline:disabled[b-5foymgx84t] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ==================== 表格复选框 ==================== */
.checkbox-col[b-5foymgx84t] {
    width: 50px;
    text-align: center;
}

.checkbox-col input[type="checkbox"][b-5foymgx84t] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #667eea;
}

.data-table tbody tr.selected-row[b-5foymgx84t] {
    background: rgba(102, 126, 234, 0.05);
}

.data-table tbody tr.selected-row:hover[b-5foymgx84t] {
    background: rgba(102, 126, 234, 0.08);
}

/* ==================== 查询进度显示 ==================== */
.progress-title[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.progress-title span[b-5foymgx84t] {
    font-size: 16px;
    font-weight: 600;
    color: #667eea;
}

.progress-percentage[b-5foymgx84t] {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #667eea;
    margin-top: 4px;
}

.processing-label[b-5foymgx84t] {
    color: #6c757d;
    font-weight: 500;
}

.processing-value[b-5foymgx84t] {
    color: #667eea;
    font-weight: 600;
    font-family: 'Consolas', 'Monaco', monospace;
}

/* ==================== 批量编辑按钮 ==================== */
.btn-primary-outline[b-5foymgx84t] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: white;
    color: #667eea;
    border: 1.5px solid #667eea;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-primary-outline:hover:not(:disabled)[b-5foymgx84t] {
    background: #667eea;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary-outline:disabled[b-5foymgx84t] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* ==================== 批量编辑模态框样式 ==================== */
.badge-info[b-5foymgx84t] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
    font-size: 14px;
    font-weight: 600;
    border-radius: 12px;
    margin-left: 8px;
}

.selected-permissions-info[b-5foymgx84t] {
    padding: 16px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 1px solid rgba(102, 126, 234, 0.2);
    border-radius: 8px;
    margin-top: 8px;
}

.info-text[b-5foymgx84t] {
    font-size: 14px;
    color: #495057;
    line-height: 1.6;
}
/* /Components/Pages/Admin/PlanManagement.razor.rz.scp.css */
/* 页面容器 */
.plan-management[b-77mxu9snut] {
    padding: 24px;
    background-color: #f8f9fa;
    min-height: 100vh;
}

/* 页面头部 */
.page-header[b-77mxu9snut] {
    margin-bottom: 32px;
}

.page-title[b-77mxu9snut] {
    font-size: 28px;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 8px 0;
}

.page-subtitle[b-77mxu9snut] {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* 统计卡片网格 */
.stats-grid[b-77mxu9snut] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-77mxu9snut] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
}

.stat-card:hover[b-77mxu9snut] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.stat-card-clickable[b-77mxu9snut] {
    cursor: pointer;
    user-select: none;
}

.stat-card-clickable:hover[b-77mxu9snut] {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px) scale(1.01);
}

.stat-card-clickable:active[b-77mxu9snut] {
    transform: translateY(-2px) scale(1.005);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
}

/* 刷新按钮 */
.stat-refresh-btn[b-77mxu9snut] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    outline: none;
}

.stat-refresh-btn.show[b-77mxu9snut] {
    opacity: 1;
    visibility: visible;
}

.stat-refresh-btn:hover:not(:disabled)[b-77mxu9snut] {
    background: #667eea;
    color: white;
    transform: scale(1.1);
}

.stat-refresh-btn:disabled[b-77mxu9snut] {
    opacity: 0.5;
    cursor: not-allowed;
}

.stat-refresh-btn svg.spinning[b-77mxu9snut] {
    animation: spin-b-77mxu9snut 1s linear infinite;
}

.stat-icon[b-77mxu9snut] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-primary[b-77mxu9snut] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.stat-icon-warning[b-77mxu9snut] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.stat-icon-info[b-77mxu9snut] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.stat-icon-success[b-77mxu9snut] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.stat-icon-purple[b-77mxu9snut] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.stat-content[b-77mxu9snut] {
    flex: 1;
}

.stat-label[b-77mxu9snut] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
    font-weight: 500;
}

.stat-value[b-77mxu9snut] {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-desc[b-77mxu9snut] {
    font-size: 12px;
    color: #9ca3af;
}

/* 查询卡片 */
.query-card[b-77mxu9snut] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.query-title[b-77mxu9snut] {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 20px 0;
}

.query-form[b-77mxu9snut] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-row[b-77mxu9snut] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.form-group[b-77mxu9snut] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group label[b-77mxu9snut] {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.form-input[b-77mxu9snut],
.form-select[b-77mxu9snut] {
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    background: white;
    transition: all 0.2s ease;
    outline: none;
}

.form-input:focus[b-77mxu9snut],
.form-select:focus[b-77mxu9snut] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-input[b-77mxu9snut]::placeholder {
    color: #9ca3af;
}

.form-actions[b-77mxu9snut] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* 按钮样式 */
.btn[b-77mxu9snut] {
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    outline: none;
}

.btn:disabled[b-77mxu9snut] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-77mxu9snut] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-primary:hover:not(:disabled)[b-77mxu9snut] {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled)[b-77mxu9snut] {
    transform: translateY(0);
}

.btn-secondary[b-77mxu9snut] {
    background: #f3f4f6;
    color: #6b7280;
}

.btn-secondary:hover:not(:disabled)[b-77mxu9snut] {
    background: #e5e7eb;
}

.loading-spinner[b-77mxu9snut] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-77mxu9snut 0.6s linear infinite;
}

@keyframes spin-b-77mxu9snut {
    to {
        transform: rotate(360deg);
    }
}

/* 表格卡片 */
.table-card[b-77mxu9snut] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table-header[b-77mxu9snut] {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.table-title[b-77mxu9snut] {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.privacy-toggle-btn[b-77mxu9snut] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: white;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    outline: none;
}

.privacy-toggle-btn:hover[b-77mxu9snut] {
    background: #f3f4f6;
    color: #667eea;
    border-color: #667eea;
}

.privacy-toggle-btn:active[b-77mxu9snut] {
    transform: scale(0.95);
}

.table-container[b-77mxu9snut] {
    overflow-x: auto;
}

.data-table[b-77mxu9snut] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-77mxu9snut] {
    background: #f9fafb;
}

.data-table th[b-77mxu9snut] {
    padding: 12px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sortable-header[b-77mxu9snut] {
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.sortable-header:hover[b-77mxu9snut] {
    color: #667eea;
    background: rgba(102, 126, 234, 0.05);
}

.sort-icon[b-77mxu9snut] {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
}

.data-table tbody tr[b-77mxu9snut] {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
}

.data-table tbody tr:hover[b-77mxu9snut] {
    background-color: #f9fafb;
}

.data-table td[b-77mxu9snut] {
    padding: 16px;
    font-size: 14px;
    color: #374151;
    vertical-align: top;
}

/* 用户信息 */
.user-info[b-77mxu9snut] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    min-width: 220px;
}

.user-avatar[b-77mxu9snut] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    flex-shrink: 0;
    background: #f3f4f6;
    transition: all 0.2s ease;
}

.user-avatar-clickable[b-77mxu9snut] {
    cursor: pointer;
}

.user-avatar-clickable:hover[b-77mxu9snut] {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: scale(1.08);
}

.user-avatar-clickable:active[b-77mxu9snut] {
    transform: scale(1.02);
}

.user-details[b-77mxu9snut] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.user-name[b-77mxu9snut] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-phone[b-77mxu9snut] {
    font-size: 12px;
    color: #6b7280;
    font-family: 'Courier New', monospace;
    line-height: 1.2;
    letter-spacing: 0.5px;
}

.user-loading[b-77mxu9snut] {
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
    padding: 12px 0;
}

.plan-title[b-77mxu9snut] {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.plan-desc[b-77mxu9snut] {
    font-size: 12px;
    color: #9ca3af;
}

/* 徽章样式 */
.badge[b-77mxu9snut] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.badge-primary[b-77mxu9snut] {
    background: #dbeafe;
    color: #1e40af;
}

.badge-success[b-77mxu9snut] {
    background: #d1fae5;
    color: #065f46;
}

.badge-warning[b-77mxu9snut] {
    background: #fef3c7;
    color: #92400e;
}

.badge-danger[b-77mxu9snut] {
    background: #fee2e2;
    color: #991b1b;
}

.badge-secondary[b-77mxu9snut] {
    background: #f3f4f6;
    color: #6b7280;
}

.badge-muted[b-77mxu9snut] {
    background: #e5e7eb;
    color: #9ca3af;
}

.badge-stage[b-77mxu9snut] {
    background: #ede9fe;
    color: #6b21a8;
}

.sequence[b-77mxu9snut] {
    font-weight: 600;
    color: #667eea;
}

.score[b-77mxu9snut] {
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 13px;
}

.score-excellent[b-77mxu9snut] {
    background: #d1fae5;
    color: #065f46;
}

.score-good[b-77mxu9snut] {
    background: #dbeafe;
    color: #1e40af;
}

.score-pass[b-77mxu9snut] {
    background: #fef3c7;
    color: #92400e;
}

.score-fail[b-77mxu9snut] {
    background: #fee2e2;
    color: #991b1b;
}

.text-muted[b-77mxu9snut] {
    color: #9ca3af;
    font-size: 13px;
}

/* 操作按钮 */
.action-buttons[b-77mxu9snut] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-77mxu9snut] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}

.btn-icon:hover[b-77mxu9snut] {
    background: #667eea;
    color: white;
    transform: scale(1.1);
}

/* 分页 */
.pagination[b-77mxu9snut] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
    gap: 12px;
}

.page-numbers[b-77mxu9snut] {
    display: flex;
    gap: 4px;
}

.page-btn[b-77mxu9snut],
.page-number[b-77mxu9snut] {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    outline: none;
}

.page-btn:hover:not(:disabled)[b-77mxu9snut],
.page-number:hover[b-77mxu9snut] {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.page-btn:disabled[b-77mxu9snut] {
    opacity: 0.4;
    cursor: not-allowed;
}

.page-number.active[b-77mxu9snut] {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.page-info[b-77mxu9snut] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6b7280;
}

.page-size-select[b-77mxu9snut] {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    color: #374151;
    background: white;
    cursor: pointer;
    outline: none;
}

.page-size-select:focus[b-77mxu9snut] {
    border-color: #667eea;
}

/* 空状态 */
.empty-state[b-77mxu9snut] {
    text-align: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.empty-state svg[b-77mxu9snut] {
    margin: 0 auto 20px;
    opacity: 0.5;
}

.empty-state h3[b-77mxu9snut] {
    font-size: 18px;
    font-weight: 600;
    color: #6b7280;
    margin: 0 0 8px 0;
}

.empty-state p[b-77mxu9snut] {
    font-size: 14px;
    color: #9ca3af;
    margin: 0;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .stats-grid[b-77mxu9snut] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 768px) {
    .plan-management[b-77mxu9snut] {
        padding: 16px;
    }

    .page-title[b-77mxu9snut] {
        font-size: 24px;
    }

    .stats-grid[b-77mxu9snut] {
        grid-template-columns: 1fr;
    }

    .form-row[b-77mxu9snut] {
        grid-template-columns: 1fr;
    }

    .stat-value[b-77mxu9snut] {
        font-size: 28px;
    }

    .table-container[b-77mxu9snut] {
        overflow-x: auto;
    }

    .data-table[b-77mxu9snut] {
        min-width: 1000px;
    }

    .pagination[b-77mxu9snut] {
        flex-direction: column;
        align-items: stretch;
    }

    .page-numbers[b-77mxu9snut] {
        justify-content: center;
    }

    .page-info[b-77mxu9snut] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-title[b-77mxu9snut] {
        font-size: 20px;
    }

    .stat-card[b-77mxu9snut] {
        padding: 16px;
    }

    .stat-icon[b-77mxu9snut] {
        width: 40px;
        height: 40px;
    }

    .stat-value[b-77mxu9snut] {
        font-size: 24px;
    }

    .query-card[b-77mxu9snut] {
        padding: 16px;
    }

    .table-header[b-77mxu9snut] {
        padding: 16px;
    }

    .pagination[b-77mxu9snut] {
        padding: 16px;
    }
}

/* 响应式断点 - 隐藏次要列 */
@media (max-width: 1400px) {
    .hide-on-narrow[b-77mxu9snut] {
        display: none;
    }
    
    .data-table[b-77mxu9snut] {
        min-width: 800px;
    }
}

/* 更窄的屏幕 - 进一步优化 */
@media (max-width: 1024px) {
    .data-table[b-77mxu9snut] {
        min-width: 700px;
    }
}
/* /Components/Pages/Admin/QuestionManagement.razor.rz.scp.css */
/* ============================================
   题库管理页面 - 现代化扁平化样式
   ============================================ */

/* 主容器 */
.question-management[b-u5kk9yz8ww] {
    width: 100%;
    min-height: 100vh;
    background: #f5f7fa;
    padding: 0;
}

/* ============================================
   统计卡片网格
   ============================================ */
.stats-grid[b-u5kk9yz8ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
    padding: 24px 24px 0;
}

.stat-card[b-u5kk9yz8ww] {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
}

.stat-card:hover[b-u5kk9yz8ww] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* 刷新按钮 */
.stat-refresh-btn[b-u5kk9yz8ww] {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: rgba(102, 126, 234, 0.1);
    color: #667eea;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    outline: none;
}

.stat-refresh-btn.show[b-u5kk9yz8ww] {
    opacity: 1;
    visibility: visible;
}

.stat-refresh-btn:hover:not(:disabled)[b-u5kk9yz8ww] {
    background: #667eea;
    color: white;
    transform: scale(1.1);
}

.stat-refresh-btn:disabled[b-u5kk9yz8ww] {
    opacity: 0.5;
    cursor: not-allowed;
}

.stat-refresh-btn svg.spinning[b-u5kk9yz8ww] {
    animation: spin-b-u5kk9yz8ww 1s linear infinite;
}

@keyframes spin-b-u5kk9yz8ww {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.stat-icon[b-u5kk9yz8ww] {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon-primary[b-u5kk9yz8ww] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.stat-icon-warning[b-u5kk9yz8ww] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.stat-icon-info[b-u5kk9yz8ww] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.stat-icon-success[b-u5kk9yz8ww] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    color: white;
}

.stat-icon-purple[b-u5kk9yz8ww] {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    color: white;
}

.stat-icon-cyan[b-u5kk9yz8ww] {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
    color: white;
}

.stat-content[b-u5kk9yz8ww] {
    flex: 1;
}

.stat-label[b-u5kk9yz8ww] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
    font-weight: 500;
}

.stat-value[b-u5kk9yz8ww] {
    font-size: 32px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-desc[b-u5kk9yz8ww] {
    font-size: 12px;
    color: #9ca3af;
}

/* ============================================
   标签导航
   ============================================ */
.tab-navigation[b-u5kk9yz8ww] {
    display: flex;
    gap: 8px;
    padding: 20px 24px 0;
    background: #fff;
    border-bottom: 2px solid #e5e7eb;
}

.tab-btn[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    transition: all 0.2s ease;
    position: relative;
}

.tab-btn:hover[b-u5kk9yz8ww] {
    background: #f3f4f6;
    color: #374151;
}

.tab-btn.active[b-u5kk9yz8ww] {
    background: #fff;
    color: #3b82f6;
}

.tab-btn.active[b-u5kk9yz8ww]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3b82f6;
}

.tab-btn svg[b-u5kk9yz8ww] {
    width: 18px;
    height: 18px;
}

/* ============================================
   内容面板
   ============================================ */
.content-panel[b-u5kk9yz8ww] {
    background: #fff;
    min-height: calc(100vh - 60px);
}

/* ============================================
   工具栏
   ============================================ */
.toolbar[b-u5kk9yz8ww] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    gap: 16px;
    flex-wrap: wrap;
}

.toolbar-left[b-u5kk9yz8ww],
.toolbar-right[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* 按钮样式 */
.btn[b-u5kk9yz8ww] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.btn:disabled[b-u5kk9yz8ww] {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary[b-u5kk9yz8ww] {
    background: #3b82f6;
    color: white;
}

.btn-primary:hover:not(:disabled)[b-u5kk9yz8ww] {
    background: #2563eb;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-secondary[b-u5kk9yz8ww] {
    background: #f3f4f6;
    color: #374151;
}

.btn-secondary:hover:not(:disabled)[b-u5kk9yz8ww] {
    background: #e5e7eb;
}

.btn-icon[b-u5kk9yz8ww],
.btn-icon-sm[b-u5kk9yz8ww] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.btn-icon[b-u5kk9yz8ww] {
    width: 40px;
    height: 40px;
}

.btn-icon-sm[b-u5kk9yz8ww] {
    width: 32px;
    height: 32px;
}

.btn-icon:hover[b-u5kk9yz8ww],
.btn-icon-sm:hover[b-u5kk9yz8ww] {
    background: #f3f4f6;
    color: #374151;
}

.btn-danger[b-u5kk9yz8ww] {
    color: #ef4444;
}

.btn-danger:hover[b-u5kk9yz8ww] {
    background: #fee2e2;
    color: #dc2626;
}

.btn-query[b-u5kk9yz8ww] {
    position: relative;
    min-width: 100px;
}

.btn-query.loading[b-u5kk9yz8ww] {
    cursor: not-allowed;
    opacity: 0.7;
}

.btn-spinner[b-u5kk9yz8ww] {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-u5kk9yz8ww 0.8s linear infinite;
    margin-right: 6px;
}

@keyframes spin-b-u5kk9yz8ww {
    to {
        transform: rotate(360deg);
    }
}

.btn-link[b-u5kk9yz8ww] {
    background: none;
    border: none;
    color: #3b82f6;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.btn-link:hover[b-u5kk9yz8ww] {
    color: #2563eb;
    text-decoration: underline;
}

.btn-link-danger[b-u5kk9yz8ww] {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    margin-left: 12px;
}

.btn-link-danger:hover[b-u5kk9yz8ww] {
    color: #dc2626;
    text-decoration: underline;
}

/* 搜索框 */
.search-box[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    min-width: 280px;
}

.search-box svg[b-u5kk9yz8ww] {
    color: #9ca3af;
    flex-shrink: 0;
}

.search-box input[b-u5kk9yz8ww] {
    border: none;
    background: transparent;
    outline: none;
    flex: 1;
    font-size: 14px;
    color: #374151;
}

.search-box input[b-u5kk9yz8ww]::placeholder {
    color: #9ca3af;
}

/* ============================================
   筛选面板
   ============================================ */
.filter-panel[b-u5kk9yz8ww] {
    padding: 16px 24px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.filter-row[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-item[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-item label[b-u5kk9yz8ww] {
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.filter-item select[b-u5kk9yz8ww] {
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    min-width: 150px;
}

.filter-item select:focus[b-u5kk9yz8ww] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================
   统计栏
   ============================================ */
.stats-bar[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 24px;
    background: #fefce8;
    border-bottom: 1px solid #fef08a;
}

.stat-item[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.stat-label[b-u5kk9yz8ww] {
    color: #78716c;
    font-weight: 500;
}

.stat-value[b-u5kk9yz8ww] {
    color: #292524;
    font-weight: 600;
}

/* ============================================
   题目列表
   ============================================ */
.question-list[b-u5kk9yz8ww],
.paper-list[b-u5kk9yz8ww] {
    padding: 24px;
}

/* 表格容器 */
.table-container[b-u5kk9yz8ww] {
    overflow-x: auto;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.data-table[b-u5kk9yz8ww] {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.data-table thead[b-u5kk9yz8ww] {
    background: #f9fafb;
}

.data-table th[b-u5kk9yz8ww] {
    padding: 12px 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 1px solid #e5e7eb;
    white-space: nowrap;
}

.data-table tbody tr[b-u5kk9yz8ww] {
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.2s ease;
}

.data-table tbody tr:hover[b-u5kk9yz8ww] {
    background: #f9fafb;
}

.data-table tbody tr.selected[b-u5kk9yz8ww] {
    background: #eff6ff;
}

.data-table td[b-u5kk9yz8ww] {
    padding: 16px;
    font-size: 14px;
    color: #374151;
    vertical-align: top;
}

/* 表格列宽 */
.col-checkbox[b-u5kk9yz8ww] {
    width: 40px;
}

.col-id[b-u5kk9yz8ww] {
    width: 120px;
}

.col-type[b-u5kk9yz8ww] {
    width: 100px;
}

.col-discipline[b-u5kk9yz8ww] {
    width: 140px;
}

.col-year[b-u5kk9yz8ww] {
    width: 80px;
}

.col-stats[b-u5kk9yz8ww] {
    width: 100px;
}

.col-actions[b-u5kk9yz8ww] {
    width: 140px;
}

/* 内容单元格 */
.content-cell[b-u5kk9yz8ww] {
    max-width: 400px;
}

.question-id[b-u5kk9yz8ww] {
    font-family: 'Consolas', monospace;
    font-size: 13px;
    color: #6b7280;
    font-weight: 500;
}

.question-desc[b-u5kk9yz8ww] {
    font-size: 13px;
    color: #6b7280;
    margin-bottom: 8px;
    font-style: italic;
}

.question-preview[b-u5kk9yz8ww] {
    font-size: 14px;
    color: #374151;
    line-height: 1.6;
}

.question-meta[b-u5kk9yz8ww] {
    margin-top: 8px;
}

.badge[b-u5kk9yz8ww] {
    display: inline-block;
    padding: 2px 8px;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 12px;
    border-radius: 12px;
    font-weight: 500;
}

/* 题型标签 */
.type-badge[b-u5kk9yz8ww] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.type-badge.type-single[b-u5kk9yz8ww] {
    background: #dbeafe;
    color: #1e40af;
}

.type-badge.type-multiple[b-u5kk9yz8ww] {
    background: #fce7f3;
    color: #9f1239;
}

.type-badge.type-judge[b-u5kk9yz8ww] {
    background: #d1fae5;
    color: #065f46;
}

.type-badge.type-indefinite[b-u5kk9yz8ww] {
    background: #fef3c7;
    color: #92400e;
}

.type-badge.type-calculate[b-u5kk9yz8ww],
.type-badge.type-shortanswer[b-u5kk9yz8ww],
.type-badge.type-comprehensive[b-u5kk9yz8ww],
.type-badge.type-case[b-u5kk9yz8ww] {
    background: #e0e7ff;
    color: #3730a3;
}

/* 学科信息 */
.discipline-info[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.discipline-info > div[b-u5kk9yz8ww] {
    font-size: 14px;
    color: #374151;
}

.text-muted[b-u5kk9yz8ww] {
    font-size: 13px;
    color: #9ca3af;
}

/* 年份标签 */
.year-badge[b-u5kk9yz8ww] {
    display: inline-block;
    padding: 4px 10px;
    background: #f3f4f6;
    color: #6b7280;
    font-size: 13px;
    border-radius: 4px;
    font-weight: 500;
}

/* 操作按钮组 */
.action-buttons[b-u5kk9yz8ww] {
    display: flex;
    gap: 8px;
}

/* ============================================
   分页
   ============================================ */
.pagination[b-u5kk9yz8ww] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid #e5e7eb;
    flex-wrap: wrap;
    gap: 16px;
}

.pagination-info[b-u5kk9yz8ww] {
    font-size: 14px;
    color: #6b7280;
}

.pagination-controls[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-page[b-u5kk9yz8ww] {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-page:hover:not(:disabled)[b-u5kk9yz8ww] {
    background: #f9fafb;
    border-color: #3b82f6;
    color: #3b82f6;
}

.btn-page.active[b-u5kk9yz8ww] {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.btn-page:disabled[b-u5kk9yz8ww] {
    opacity: 0.5;
    cursor: not-allowed;
}

.page-numbers[b-u5kk9yz8ww] {
    display: flex;
    gap: 4px;
}

.pagination-size select[b-u5kk9yz8ww] {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

/* ============================================
   试卷网格
   ============================================ */
.paper-grid[b-u5kk9yz8ww] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.paper-card[b-u5kk9yz8ww] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.paper-card:hover[b-u5kk9yz8ww] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.paper-card-header[b-u5kk9yz8ww] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.paper-type-badge[b-u5kk9yz8ww] {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.paper-type-badge.type-章节练习[b-u5kk9yz8ww] {
    background: #dbeafe;
    color: #1e40af;
}

.paper-type-badge.type-历年真题[b-u5kk9yz8ww] {
    background: #fee2e2;
    color: #991b1b;
}

.paper-type-badge.type-计划考核[b-u5kk9yz8ww] {
    background: #fef3c7;
    color: #92400e;
}

.paper-type-badge.type-智能组卷[b-u5kk9yz8ww] {
    background: #e0e7ff;
    color: #3730a3;
}

.paper-actions[b-u5kk9yz8ww] {
    display: flex;
    gap: 6px;
}

.paper-card-body[b-u5kk9yz8ww] {
    padding: 16px;
}

.paper-title[b-u5kk9yz8ww] {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.paper-subtitle[b-u5kk9yz8ww] {
    font-size: 14px;
    color: #6b7280;
    margin: 0 0 12px 0;
}

.paper-description[b-u5kk9yz8ww] {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.5;
}

.paper-card-footer[b-u5kk9yz8ww] {
    padding: 16px;
    border-top: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.paper-meta[b-u5kk9yz8ww],
.paper-info[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.meta-item[b-u5kk9yz8ww],
.info-item[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #6b7280;
}

.meta-item svg[b-u5kk9yz8ww] {
    color: #9ca3af;
}

/* ============================================
   数据分析
   ============================================ */
.analytics-container[b-u5kk9yz8ww] {
    padding: 24px;
}

/* 统计卡片网格 */
.stats-grid[b-u5kk9yz8ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.stat-card[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.3s ease;
}

.stat-card:hover[b-u5kk9yz8ww] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.stat-icon[b-u5kk9yz8ww] {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.stat-icon-primary[b-u5kk9yz8ww] {
    background: #dbeafe;
    color: #2563eb;
}

.stat-icon-success[b-u5kk9yz8ww] {
    background: #d1fae5;
    color: #059669;
}

.stat-icon-warning[b-u5kk9yz8ww] {
    background: #fed7aa;
    color: #d97706;
}

.stat-icon-info[b-u5kk9yz8ww] {
    background: #e0e7ff;
    color: #6366f1;
}

.stat-content[b-u5kk9yz8ww] {
    flex: 1;
}

.stat-title[b-u5kk9yz8ww] {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 8px;
}

.stat-number[b-u5kk9yz8ww] {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 4px;
}

.stat-change[b-u5kk9yz8ww] {
    font-size: 13px;
    color: #9ca3af;
}

.stat-change.positive[b-u5kk9yz8ww] {
    color: #059669;
}

/* 分析选项卡 */
.analytics-tabs[b-u5kk9yz8ww] {
    display: flex;
    gap: 8px;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 24px;
}

.analytics-tab-btn[b-u5kk9yz8ww] {
    padding: 12px 20px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.analytics-tab-btn:hover[b-u5kk9yz8ww] {
    color: #374151;
}

.analytics-tab-btn.active[b-u5kk9yz8ww] {
    color: #3b82f6;
}

.analytics-tab-btn.active[b-u5kk9yz8ww]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: #3b82f6;
}

/* 分析内容 */
.analytics-content[b-u5kk9yz8ww] {
    min-height: 400px;
}

.overview-section[b-u5kk9yz8ww],
.difficulty-section[b-u5kk9yz8ww],
.quality-section[b-u5kk9yz8ww],
.hottest-section[b-u5kk9yz8ww],
.problem-section[b-u5kk9yz8ww] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.analytics-content h3[b-u5kk9yz8ww] {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 16px 0;
}

.chart-placeholder[b-u5kk9yz8ww] {
    padding: 60px 20px;
    text-align: center;
    background: #f9fafb;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    color: #6b7280;
}

.chart-placeholder p[b-u5kk9yz8ww] {
    margin: 8px 0;
    font-size: 14px;
}

.chart-placeholder ul[b-u5kk9yz8ww] {
    display: inline-block;
    text-align: left;
    margin-top: 16px;
}

.chart-placeholder li[b-u5kk9yz8ww] {
    margin: 6px 0;
    color: #9ca3af;
}

/* ============================================
   加载和空状态
   ============================================ */
.loading-container[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #9ca3af;
}

.spinner[b-u5kk9yz8ww] {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f4f6;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-u5kk9yz8ww 0.8s linear infinite;
}

@keyframes spin-b-u5kk9yz8ww {
    to {
        transform: rotate(360deg);
    }
}

.loading-container p[b-u5kk9yz8ww] {
    margin-top: 16px;
    font-size: 14px;
}

.empty-state[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    color: #9ca3af;
}

.empty-state svg[b-u5kk9yz8ww] {
    margin-bottom: 20px;
}

.empty-state p[b-u5kk9yz8ww] {
    font-size: 16px;
    margin-bottom: 20px;
}

/* 全局加载遮罩 */
.loading-overlay[b-u5kk9yz8ww] {
    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: 9999;
}

.loading-content[b-u5kk9yz8ww] {
    background: #fff;
    padding: 32px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    min-width: 200px;
}

.loading-content .spinner[b-u5kk9yz8ww] {
    width: 48px;
    height: 48px;
}

.loading-content p[b-u5kk9yz8ww] {
    font-size: 15px;
    color: #374151;
    margin: 0;
}

/* ============================================
   响应式设计
   ============================================ */
@media (max-width: 1024px) {
    .paper-grid[b-u5kk9yz8ww] {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }
}

@media (max-width: 768px) {
    .toolbar[b-u5kk9yz8ww] {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-left[b-u5kk9yz8ww],
    .toolbar-right[b-u5kk9yz8ww] {
        width: 100%;
        justify-content: space-between;
    }

    .search-box[b-u5kk9yz8ww] {
        min-width: 100%;
    }

    .filter-row[b-u5kk9yz8ww] {
        flex-direction: column;
    }

    .filter-item[b-u5kk9yz8ww] {
        width: 100%;
    }

    .filter-item select[b-u5kk9yz8ww] {
        width: 100%;
    }

    .pagination[b-u5kk9yz8ww] {
        flex-direction: column;
        align-items: stretch;
    }

    .pagination-controls[b-u5kk9yz8ww] {
        justify-content: center;
    }

    .paper-grid[b-u5kk9yz8ww] {
        grid-template-columns: 1fr;
    }

    .stats-grid[b-u5kk9yz8ww] {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   弹窗样式
   ============================================ */
.modal-overlay[b-u5kk9yz8ww] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn-b-u5kk9yz8ww 0.2s ease;
    padding: 20px;
}

@keyframes fadeIn-b-u5kk9yz8ww {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.modal-container[b-u5kk9yz8ww] {
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-u5kk9yz8ww 0.3s ease;
}

@keyframes slideUp-b-u5kk9yz8ww {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-large[b-u5kk9yz8ww] {
    width: 90%;
    max-width: 900px;
}

.modal-header[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid #e5e7eb;
}

.modal-header h3[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
}

.modal-header h3 svg[b-u5kk9yz8ww] {
    color: #3b82f6;
}

.modal-close[b-u5kk9yz8ww] {
    width: 40px;
    height: 40px;
    border: none;
    background: #f3f4f6;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-u5kk9yz8ww] {
    background: #e5e7eb;
    transform: rotate(90deg);
}

.modal-body[b-u5kk9yz8ww] {
    flex: 1;
    overflow-y: auto;
    padding: 32px;
}

.modal-body[b-u5kk9yz8ww]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-u5kk9yz8ww]::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

.modal-body[b-u5kk9yz8ww]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

.modal-body[b-u5kk9yz8ww]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

.modal-footer[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 32px;
    border-top: 1px solid #e5e7eb;
}

/* ============================================
   题目详情查看样式
   ============================================ */
.question-detail-view[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.detail-card[b-u5kk9yz8ww] {
    background: #f9fafb;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.detail-card-header[b-u5kk9yz8ww] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 16px 24px;
}

.detail-card-header h4[b-u5kk9yz8ww] {
    margin: 0;
    color: white;
    font-size: 16px;
    font-weight: 600;
}

.detail-card-body[b-u5kk9yz8ww] {
    padding: 24px;
}

.detail-row[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e5e7eb;
}

.detail-row:last-child[b-u5kk9yz8ww] {
    border-bottom: none;
}

.detail-row label[b-u5kk9yz8ww] {
    min-width: 120px;
    font-weight: 500;
    color: #6b7280;
}

.detail-value[b-u5kk9yz8ww] {
    color: #1f2937;
    font-weight: 500;
}

.description-content[b-u5kk9yz8ww] {
    color: #374151;
    line-height: 1.8;
    white-space: pre-wrap;
    background: white;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.sub-question-item[b-u5kk9yz8ww] {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
    border: 1px solid #e5e7eb;
}

.sub-question-item:last-child[b-u5kk9yz8ww] {
    margin-bottom: 0;
}

.sub-question-header[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.sub-question-number[b-u5kk9yz8ww] {
    font-size: 15px;
    font-weight: 600;
    color: #3b82f6;
}

.sub-question-score[b-u5kk9yz8ww] {
    background: #dbeafe;
    color: #1e40af;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 500;
}

.sub-question-content[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.question-text[b-u5kk9yz8ww] {
    font-size: 15px;
    color: #1f2937;
    line-height: 1.8;
    font-weight: 500;
}

.options-list[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-item[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.option-item:hover[b-u5kk9yz8ww] {
    background: #f3f4f6;
}

.option-item.correct-option[b-u5kk9yz8ww] {
    background: #d1fae5;
    border-color: #10b981;
}

.option-label[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    background: white;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    font-weight: 600;
    color: #6b7280;
}

.correct-option .option-label[b-u5kk9yz8ww] {
    background: #10b981;
    border-color: #10b981;
    color: white;
}

.option-content[b-u5kk9yz8ww] {
    flex: 1;
    color: #374151;
}

.correct-badge[b-u5kk9yz8ww] {
    background: #10b981;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.analysis-section[b-u5kk9yz8ww] {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 16px;
}

.analysis-label[b-u5kk9yz8ww] {
    font-weight: 600;
    color: #92400e;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.analysis-label[b-u5kk9yz8ww]::before {
    content: "💡";
}

.analysis-content[b-u5kk9yz8ww] {
    color: #78350f;
    line-height: 1.8;
}

/* ============================================
   编辑表单样式
   ============================================ */
.edit-form[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.form-section[b-u5kk9yz8ww] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}

.form-section-title[b-u5kk9yz8ww] {
    margin: 0 0 20px 0;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.form-section-header[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.form-row[b-u5kk9yz8ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.form-row:last-child[b-u5kk9yz8ww] {
    margin-bottom: 0;
}

.form-group[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-label[b-u5kk9yz8ww] {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

.form-input[b-u5kk9yz8ww],
.form-select[b-u5kk9yz8ww],
.form-textarea[b-u5kk9yz8ww] {
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: #1f2937;
    transition: all 0.2s ease;
    background: white;
}

.form-input:focus[b-u5kk9yz8ww],
.form-select:focus[b-u5kk9yz8ww],
.form-textarea:focus[b-u5kk9yz8ww] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-textarea[b-u5kk9yz8ww] {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
}

.btn-sm[b-u5kk9yz8ww] {
    padding: 6px 12px;
    font-size: 13px;
}

.sub-question-editor[b-u5kk9yz8ww] {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 16px;
}

.sub-question-editor-header[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.options-editor[b-u5kk9yz8ww] {
    margin-top: 16px;
}

.options-editor-header[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.option-editor[b-u5kk9yz8ww] {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.option-label-input[b-u5kk9yz8ww] {
    text-align: center;
    font-weight: 600;
}

.checkbox-label[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}

.checkbox-label input[type="checkbox"][b-u5kk9yz8ww] {
    cursor: pointer;
}

.empty-state-small[b-u5kk9yz8ww] {
    text-align: center;
    padding: 40px 20px;
    color: #6b7280;
}

.empty-state-small p[b-u5kk9yz8ww] {
    margin: 0;
    font-size: 14px;
}

/* ============================================
   题目统计弹窗样式
   ============================================ */
.stats-modal .modal-body[b-u5kk9yz8ww] {
    max-height: 80vh;
    overflow-y: auto;
}

.stats-content[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stats-overview[b-u5kk9yz8ww] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px;
    border-radius: 12px;
    color: white;
}

.stats-section-title[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
    color: inherit;
}

.stats-section-title svg[b-u5kk9yz8ww] {
    flex-shrink: 0;
}

.stats-grid-small[b-u5kk9yz8ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.stat-card-small[b-u5kk9yz8ww] {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 16px;
    border-radius: 10px;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-label-small[b-u5kk9yz8ww] {
    font-size: 13px;
    opacity: 0.9;
    margin-bottom: 8px;
    font-weight: 500;
}

.stat-value-large[b-u5kk9yz8ww] {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
}

.stats-detail[b-u5kk9yz8ww] {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.sub-stats-list[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sub-stat-card[b-u5kk9yz8ww] {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.sub-stat-card:hover[b-u5kk9yz8ww] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.sub-stat-header[b-u5kk9yz8ww] {
    background: white;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
}

.sub-stat-title[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sub-number[b-u5kk9yz8ww] {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
}

.sub-stat-quality[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quality-label[b-u5kk9yz8ww] {
    font-size: 13px;
    color: #6b7280;
}

.quality-badge[b-u5kk9yz8ww] {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.quality-优秀[b-u5kk9yz8ww] {
    background: #d1fae5;
    color: #065f46;
}

.quality-良好[b-u5kk9yz8ww] {
    background: #dbeafe;
    color: #1e40af;
}

.quality-一般[b-u5kk9yz8ww] {
    background: #fef3c7;
    color: #92400e;
}

.quality-较差[b-u5kk9yz8ww] {
    background: #fee2e2;
    color: #991b1b;
}

.sub-stat-body[b-u5kk9yz8ww] {
    padding: 20px;
}

.stat-row-grid[b-u5kk9yz8ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 16px;
}

.stat-group[b-u5kk9yz8ww] {
    background: white;
    padding: 16px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.stat-group-title[b-u5kk9yz8ww] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e5e7eb;
}

.stat-items[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stat-item-inline[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    line-height: 1.5;
}

.stat-item-inline .label[b-u5kk9yz8ww] {
    color: #6b7280;
}

.stat-item-inline .value[b-u5kk9yz8ww] {
    font-weight: 600;
    color: #1f2937;
}

.stat-item-inline .value.highlight[b-u5kk9yz8ww] {
    color: #3b82f6;
    font-size: 15px;
}

.difficulty-badge[b-u5kk9yz8ww] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

.difficulty-极易[b-u5kk9yz8ww] {
    background: #d1fae5;
    color: #065f46;
}

.difficulty-易[b-u5kk9yz8ww] {
    background: #dbeafe;
    color: #1e40af;
}

.difficulty-中等[b-u5kk9yz8ww] {
    background: #fef3c7;
    color: #92400e;
}

.difficulty-难[b-u5kk9yz8ww] {
    background: #fed7aa;
    color: #9a3412;
}

.difficulty-极难[b-u5kk9yz8ww] {
    background: #fee2e2;
    color: #991b1b;
}

.stat-tags[b-u5kk9yz8ww] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag[b-u5kk9yz8ww] {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.tag-success[b-u5kk9yz8ww] {
    background: #d1fae5;
    color: #065f46;
}

.tag-info[b-u5kk9yz8ww] {
    background: #dbeafe;
    color: #1e40af;
}

.tag-warning[b-u5kk9yz8ww] {
    background: #fef3c7;
    color: #92400e;
}

.tag-danger[b-u5kk9yz8ww] {
    background: #fee2e2;
    color: #991b1b;
}

.badge[b-u5kk9yz8ww] {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.badge-success[b-u5kk9yz8ww] {
    background: #d1fae5;
    color: #065f46;
}

.badge-danger[b-u5kk9yz8ww] {
    background: #fee2e2;
    color: #991b1b;
}

.badge-warning[b-u5kk9yz8ww] {
    background: #fef3c7;
    color: #92400e;
}

/* ============================================
   自定义组卷弹窗样式
   ============================================ */
.custom-paper-modal .modal-body[b-u5kk9yz8ww] {
    max-height: 80vh;
    overflow-y: auto;
    padding: 0;
}

.custom-paper-content[b-u5kk9yz8ww] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 24px;
}

.selected-questions-preview[b-u5kk9yz8ww],
.paper-settings-form[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.section-title[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    padding-bottom: 12px;
    border-bottom: 2px solid #e5e7eb;
}

.section-title svg[b-u5kk9yz8ww] {
    color: #3b82f6;
    flex-shrink: 0;
}

.selected-questions-list[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

.selected-question-item[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.selected-question-item:hover[b-u5kk9yz8ww] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateX(-2px);
}

.question-icon[b-u5kk9yz8ww] {
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.question-info[b-u5kk9yz8ww] {
    flex: 1;
    min-width: 0;
}

.question-id[b-u5kk9yz8ww] {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.question-meta-inline[b-u5kk9yz8ww] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    flex-wrap: wrap;
}

.text-muted[b-u5kk9yz8ww] {
    color: #9ca3af;
}

.paper-settings-form .form-section[b-u5kk9yz8ww] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.form-row[b-u5kk9yz8ww] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.form-group-full[b-u5kk9yz8ww] {
    grid-column: 1 / -1;
}

.required[b-u5kk9yz8ww] {
    color: #ef4444;
    margin-left: 2px;
}

/* 响应式调整 */
@media (max-width: 1024px) {
    .custom-paper-content[b-u5kk9yz8ww] {
        grid-template-columns: 1fr;
    }

    .stat-row-grid[b-u5kk9yz8ww] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .stats-grid-small[b-u5kk9yz8ww] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Admin/SmsManagement.razor.rz.scp.css */
/* 短信管理页面样式 - 现代化扁平设计 */

.sms-page[b-7t65b6vzac] {
    padding: 24px;
    background: #f8f9fa;
    min-height: 100vh;
}

/* ==================== 页面头部 ==================== */
.page-header[b-7t65b6vzac] {
    margin-bottom: 24px;
}

.header-content[b-7t65b6vzac] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-title[b-7t65b6vzac] {
    display: flex;
    align-items: center;
    gap: 16px;
}

.header-title svg[b-7t65b6vzac] {
    color: #667eea;
}

.header-title h1[b-7t65b6vzac] {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
}

.header-title p[b-7t65b6vzac] {
    margin: 4px 0 0 0;
    font-size: 14px;
    color: #6c757d;
}

/* ==================== 统计卡片 ==================== */
.stats-grid[b-7t65b6vzac] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-7t65b6vzac] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.stat-card:hover[b-7t65b6vzac] {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.stat-icon[b-7t65b6vzac] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    color: white;
    flex-shrink: 0;
}

.stat-content[b-7t65b6vzac] {
    flex: 1;
}

.stat-value[b-7t65b6vzac] {
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1;
    margin-bottom: 4px;
}

.stat-label[b-7t65b6vzac] {
    font-size: 14px;
    color: #6c757d;
    font-weight: 500;
}

/* ==================== 查询选项卡 ==================== */
.query-tabs[b-7t65b6vzac] {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 8px;
}

.query-tab[b-7t65b6vzac] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #6c757d;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    bottom: -10px;
}

.query-tab:hover[b-7t65b6vzac] {
    color: #495057;
    background: rgba(102, 126, 234, 0.05);
}

.query-tab.active[b-7t65b6vzac] {
    color: #667eea;
    border-bottom-color: #667eea;
    font-weight: 600;
}

.query-tab svg[b-7t65b6vzac] {
    flex-shrink: 0;
}

/* ==================== 搜索和筛选区域 ==================== */
.filter-section[b-7t65b6vzac] {
    margin-bottom: 24px;
    padding: 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.filter-row[b-7t65b6vzac] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.search-group[b-7t65b6vzac] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.search-group svg[b-7t65b6vzac] {
    position: absolute;
    left: 16px;
    color: #adb5bd;
}

.search-group input[b-7t65b6vzac] {
    width: 100%;
    padding: 12px 12px 12px 48px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.search-group input:focus[b-7t65b6vzac] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.filter-inputs[b-7t65b6vzac] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-input[b-7t65b6vzac] {
    flex: 1;
    min-width: 150px;
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.filter-input:focus[b-7t65b6vzac] {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ==================== 按钮样式 ==================== */
.btn-primary[b-7t65b6vzac] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover:not(:disabled)[b-7t65b6vzac] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.btn-primary:active[b-7t65b6vzac] {
    transform: translateY(0);
}

.btn-primary:disabled[b-7t65b6vzac] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ==================== 数据卡片和表格 ==================== */
.data-card[b-7t65b6vzac] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.table-container[b-7t65b6vzac] {
    overflow-x: auto;
}

.data-table[b-7t65b6vzac] {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead[b-7t65b6vzac] {
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
}

.data-table th[b-7t65b6vzac] {
    padding: 16px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.data-table tbody tr[b-7t65b6vzac] {
    border-bottom: 1px solid #e9ecef;
    transition: all 0.2s ease;
}

.data-table tbody tr:hover[b-7t65b6vzac] {
    background: #f8f9fa;
}

.data-table tbody tr:last-child[b-7t65b6vzac] {
    border-bottom: none;
}

.data-table td[b-7t65b6vzac] {
    padding: 16px;
    font-size: 14px;
    color: #495057;
}

/* ==================== 表格内容样式 ==================== */
.phone-number[b-7t65b6vzac] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
}

.code-text[b-7t65b6vzac] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 16px;
    font-weight: 700;
    color: #667eea;
    letter-spacing: 2px;
}

.date-text[b-7t65b6vzac] {
    font-size: 13px;
    color: #6c757d;
}

.expire-text[b-7t65b6vzac] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: #6c757d;
}

.ip-text[b-7t65b6vzac] {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    color: #6c757d;
}

/* ==================== 短信类型徽章 ==================== */
.type-badge[b-7t65b6vzac] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.type-login[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.15) 0%, rgba(245, 87, 108, 0.15) 100%);
    color: #f5576c;
    border: 1px solid rgba(245, 87, 108, 0.3);
}

.type-sign[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.15) 0%, rgba(0, 242, 254, 0.15) 100%);
    color: #4facfe;
    border: 1px solid rgba(79, 172, 254, 0.3);
}

/* ==================== 状态徽章 ==================== */
.status-badge[b-7t65b6vzac] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    letter-spacing: 0.3px;
}

.status-success[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.15) 0%, rgba(56, 249, 215, 0.15) 100%);
    color: #43e97b;
    border: 1px solid rgba(67, 233, 123, 0.3);
}

.status-failed[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(250, 112, 154, 0.15) 0%, rgba(254, 225, 64, 0.15) 100%);
    color: #fa709a;
    border: 1px solid rgba(250, 112, 154, 0.3);
}

.status-expired[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(156, 163, 175, 0.15) 0%, rgba(107, 114, 128, 0.15) 100%);
    color: #9ca3af;
    border: 1px solid rgba(156, 163, 175, 0.3);
}

.status-valid[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(147, 51, 234, 0.15) 100%);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

/* ==================== 数量徽章 ==================== */
.count-badge[b-7t65b6vzac] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 6px;
}

.count-total[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    color: #667eea;
}

.count-login[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(240, 147, 251, 0.1) 0%, rgba(245, 87, 108, 0.1) 100%);
    color: #f5576c;
}

.count-sign[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
    color: #4facfe;
}

.count-success[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(67, 233, 123, 0.1) 0%, rgba(56, 249, 215, 0.1) 100%);
    color: #43e97b;
}

.count-failed[b-7t65b6vzac] {
    background: linear-gradient(135deg, rgba(250, 112, 154, 0.1) 0%, rgba(254, 225, 64, 0.1) 100%);
    color: #fa709a;
}

/* ==================== 空状态 ==================== */
.empty-state[b-7t65b6vzac] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
}

.empty-state svg[b-7t65b6vzac] {
    color: #dee2e6;
    margin-bottom: 16px;
}

.empty-state h3[b-7t65b6vzac] {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: #495057;
}

.empty-state p[b-7t65b6vzac] {
    margin: 0;
    font-size: 14px;
    color: #6c757d;
}

/* ==================== 加载状态 ==================== */
.loading-container[b-7t65b6vzac] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
}

.spinner[b-7t65b6vzac] {
    width: 48px;
    height: 48px;
    border: 4px solid #e9ecef;
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin-b-7t65b6vzac 1s linear infinite;
}

@keyframes spin-b-7t65b6vzac {
    to { transform: rotate(360deg); }
}

.spinner-sm[b-7t65b6vzac] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin-b-7t65b6vzac 0.8s linear infinite;
    margin-right: 8px;
}

.loading-container p[b-7t65b6vzac] {
    margin-top: 16px;
    font-size: 14px;
    color: #6c757d;
}

/* ==================== 分页 ==================== */
.pagination-container[b-7t65b6vzac] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-top: 1px solid #e9ecef;
}

.pagination-info[b-7t65b6vzac] {
    font-size: 14px;
    color: #6c757d;
}

.pagination[b-7t65b6vzac] {
    display: flex;
    gap: 8px;
}

.page-btn[b-7t65b6vzac] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background: white;
    color: #495057;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.page-btn:hover:not(:disabled):not(.active)[b-7t65b6vzac] {
    background: #f8f9fa;
    border-color: #adb5bd;
}

.page-btn.active[b-7t65b6vzac] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-color: transparent;
}

.page-btn:disabled[b-7t65b6vzac] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ==================== 响应式设计 ==================== */
@media (max-width: 768px) {
    .sms-page[b-7t65b6vzac] {
        padding: 16px;
    }

    .header-content[b-7t65b6vzac] {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .header-title[b-7t65b6vzac] {
        width: 100%;
    }

    .header-title h1[b-7t65b6vzac] {
        font-size: 22px;
    }

    .stats-grid[b-7t65b6vzac] {
        grid-template-columns: 1fr;
    }

    .filter-inputs[b-7t65b6vzac] {
        flex-direction: column;
    }

    .filter-input[b-7t65b6vzac],
    .btn-primary[b-7t65b6vzac] {
        width: 100%;
    }

    .table-container[b-7t65b6vzac] {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .data-table[b-7t65b6vzac] {
        min-width: 800px;
    }

    .pagination-container[b-7t65b6vzac] {
        flex-direction: column;
        gap: 12px;
        align-items: center;
    }

    .query-tabs[b-7t65b6vzac] {
        flex-direction: column;
        gap: 8px;
    }

    .query-tab[b-7t65b6vzac] {
        width: 100%;
        justify-content: center;
    }
}

/* ==================== 可点击元素 ==================== */
.clickable[b-7t65b6vzac] {
    cursor: pointer;
    transition: all 0.2s ease;
}

.clickable:hover[b-7t65b6vzac] {
    color: #667eea;
    text-decoration: underline;
}

/* ==================== 查看详情按钮 ==================== */
.btn-view[b-7t65b6vzac] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.btn-view:hover[b-7t65b6vzac] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.btn-view:active[b-7t65b6vzac] {
    transform: translateY(0);
}

.btn-view svg[b-7t65b6vzac] {
    width: 16px;
    height: 16px;
}

/* ==================== 汇总表格行悬停效果 ==================== */
.summary-row[b-7t65b6vzac] {
    transition: all 0.2s ease;
}

.summary-row:hover[b-7t65b6vzac] {
    background: rgba(102, 126, 234, 0.05);
    transform: translateX(4px);
}

/* ==================== 分页省略号 ==================== */
.page-ellipsis[b-7t65b6vzac] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    color: #94a3b8;
    font-weight: 600;
    user-select: none;
}

@media (max-width: 480px) {
    .stat-value[b-7t65b6vzac] {
        font-size: 24px;
    }

    .data-table th[b-7t65b6vzac],
    .data-table td[b-7t65b6vzac] {
        padding: 12px;
        font-size: 13px;
    }
}
/* /Components/Pages/Admin/UserManagement.razor.rz.scp.css */
/* 页面容器 */
.page-container[b-m688ey861z] {
    max-width: 1400px;
}

.page-header[b-m688ey861z] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 32px;
}

/* 筛选区域 */
.filter-section[b-m688ey861z] {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.search-box[b-m688ey861z] {
    flex: 1;
    min-width: 250px;
    position: relative;
    display: flex;
    align-items: center;
}

.search-box svg[b-m688ey861z] {
    position: absolute;
    left: 16px;
    color: var(--text-tertiary);
}

.search-box input[b-m688ey861z] {
    width: 100%;
    padding: 12px 16px 12px 48px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: all var(--transition-fast);
}

.search-box input:focus[b-m688ey861z] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* 按钮样式 */
.btn[b-m688ey861z] {
    padding: 12px 24px;
    border: none;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--transition-fast);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-primary[b-m688ey861z] {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
}

.btn-primary:hover[b-m688ey861z] {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-primary:disabled[b-m688ey861z] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-secondary[b-m688ey861z] {
    background-color: white;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover[b-m688ey861z] {
    background-color: var(--bg-secondary);
}

/* 数据卡片 */
.data-card[b-m688ey861z] {
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.table-responsive[b-m688ey861z] {
    overflow-x: auto;
}

/* 用户头像 */
.user-cell[b-m688ey861z] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-sm[b-m688ey861z] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.user-avatar-img[b-m688ey861z] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.code-text[b-m688ey861z] {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    font-size: 13px;
    color: var(--text-secondary);
}

/* 操作按钮 */
.action-buttons[b-m688ey861z] {
    display: flex;
    gap: 8px;
}

.btn-icon[b-m688ey861z] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.btn-icon:hover[b-m688ey861z] {
    background-color: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.btn-icon.btn-danger:hover[b-m688ey861z] {
    background-color: var(--danger-color);
}

/* 空状态 */
.empty-state[b-m688ey861z] {
    padding: 60px 20px;
    text-align: center;
    color: var(--text-tertiary);
}

.empty-state svg[b-m688ey861z] {
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state p[b-m688ey861z] {
    font-size: 16px;
    margin: 0;
}

/* 分页 */
.pagination-container[b-m688ey861z] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-top: 1px solid var(--border-light);
}

.pagination-info[b-m688ey861z] {
    font-size: 14px;
    color: var(--text-secondary);
}

.pagination[b-m688ey861z] {
    display: flex;
    gap: 8px;
}

.page-btn[b-m688ey861z] {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: white;
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.page-btn:hover:not(:disabled)[b-m688ey861z] {
    background-color: var(--bg-secondary);
    border-color: var(--primary-color);
}

.page-btn.active[b-m688ey861z] {
    background-color: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.page-btn:disabled[b-m688ey861z] {
    opacity: 0.5;
    cursor: not-allowed;
}

.text-center[b-m688ey861z] {
    text-align: center;
}

/* 加载动画 */
.spinner[b-m688ey861z] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-m688ey861z 0.6s linear infinite;
}

@keyframes spin-b-m688ey861z {
    to { transform: rotate(360deg); }
}

/* 错误提示 */
.alert[b-m688ey861z] {
    padding: 16px 20px;
    border-radius: var(--radius-md);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    animation: slideDown-b-m688ey861z 0.3s ease-out;
}

.alert-danger[b-m688ey861z] {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
}

.alert svg[b-m688ey861z] {
    flex-shrink: 0;
}

@keyframes slideDown-b-m688ey861z {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 弹窗样式 */
.modal-overlay[b-m688ey861z] {
    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;
    animation: fadeIn-b-m688ey861z 0.3s ease-out;
}

.modal-content[b-m688ey861z] {
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-m688ey861z 0.3s ease-out;
}

.modal-header[b-m688ey861z] {
    padding: 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h2[b-m688ey861z] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close[b-m688ey861z] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--radius-sm);
    background-color: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.modal-close:hover[b-m688ey861z] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

.modal-body[b-m688ey861z] {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-m688ey861z] {
    padding: 16px 24px;
    border-top: 1px solid var(--border-light);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* 用户详情 */
.user-detail-header[b-m688ey861z] {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.user-avatar-large[b-m688ey861z] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    font-weight: 600;
    flex-shrink: 0;
    object-fit: cover;
}

.user-detail-info h3[b-m688ey861z] {
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
}

.user-id[b-m688ey861z] {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
}

.detail-grid[b-m688ey861z] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-item[b-m688ey861z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.detail-item.full-width[b-m688ey861z] {
    grid-column: 1 / -1;
}

.detail-item label[b-m688ey861z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-item span[b-m688ey861z] {
    font-size: 15px;
    color: var(--text-primary);
}

@keyframes fadeIn-b-m688ey861z {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp-b-m688ey861z {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 表单样式 */
.form-grid[b-m688ey861z] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.form-group[b-m688ey861z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-group.full-width[b-m688ey861z] {
    grid-column: 1 / -1;
}

.form-group label[b-m688ey861z] {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-input[b-m688ey861z] {
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    color: var(--text-primary);
    transition: all var(--transition-fast);
    background-color: white;
}

.form-input:focus[b-m688ey861z] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.form-input:disabled[b-m688ey861z] {
    background-color: var(--bg-secondary);
    cursor: not-allowed;
    opacity: 0.6;
}

.form-hint[b-m688ey861z] {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

select.form-input[b-m688ey861z] {
    cursor: pointer;
}

/* 响应式 */
@media (max-width: 768px) {
    .detail-grid[b-m688ey861z] {
        grid-template-columns: 1fr;
    }
    
    .form-grid[b-m688ey861z] {
        grid-template-columns: 1fr;
    }
    
    .modal-content[b-m688ey861z] {
        width: 95%;
        max-height: 95vh;
    }
}
/* /Components/Pages/Admin/WatchStatisticsPage.razor.rz.scp.css */
/* 观看统计页面样式 */
.watch-statistics-container[b-pm8g8n5wz4] {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.page-title[b-pm8g8n5wz4] {
    color: #2c3e50;
    margin-bottom: 24px;
    font-weight: 600;
}

/* 统计汇总卡片 */
.summary-cards[b-pm8g8n5wz4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.stat-card[b-pm8g8n5wz4] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    padding: 24px;
    color: white;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover[b-pm8g8n5wz4] {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.stat-card:nth-child(1)[b-pm8g8n5wz4] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card:nth-child(2)[b-pm8g8n5wz4] {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card:nth-child(3)[b-pm8g8n5wz4] {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card:nth-child(4)[b-pm8g8n5wz4] {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-icon[b-pm8g8n5wz4] {
    font-size: 48px;
    opacity: 0.9;
}

.stat-content[b-pm8g8n5wz4] {
    flex: 1;
}

.stat-value[b-pm8g8n5wz4] {
    font-size: 32px;
    font-weight: bold;
    margin-bottom: 4px;
}

.stat-label[b-pm8g8n5wz4] {
    font-size: 14px;
    opacity: 0.9;
}

/* 小型统计卡片 */
.stat-card-sm[b-pm8g8n5wz4] {
    background: white;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.stat-value-lg[b-pm8g8n5wz4] {
    font-size: 28px;
    font-weight: bold;
    color: #2c3e50;
    margin-top: 8px;
}

.stat-value-md[b-pm8g8n5wz4] {
    font-size: 20px;
    font-weight: bold;
    color: #3498db;
}

/* 筛选面板 */
.filter-panel[b-pm8g8n5wz4] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

/* Tab样式 */
.nav-tabs[b-pm8g8n5wz4] {
    border-bottom: 2px solid #e0e0e0;
}

.nav-tabs .nav-link[b-pm8g8n5wz4] {
    border: none;
    color: #666;
    font-weight: 500;
    padding: 12px 24px;
    transition: all 0.2s;
}

.nav-tabs .nav-link:hover[b-pm8g8n5wz4] {
    color: #3498db;
    background-color: #f8f9fa;
}

.nav-tabs .nav-link.active[b-pm8g8n5wz4] {
    color: #3498db;
    background-color: white;
    border-bottom: 3px solid #3498db;
}

/* 统计结果区域 */
.statistics-results[b-pm8g8n5wz4] {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 加载状态 */
.loading-container[b-pm8g8n5wz4],
.loading-summary[b-pm8g8n5wz4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

/* 表格样式增强 */
.table-hover tbody tr:hover[b-pm8g8n5wz4] {
    background-color: #f8f9fa;
    cursor: pointer;
}

.table thead th[b-pm8g8n5wz4] {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}

/* 进度条美化 */
.progress[b-pm8g8n5wz4] {
    height: 24px;
    border-radius: 12px;
    background-color: #e9ecef;
}

.progress-bar[b-pm8g8n5wz4] {
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.6s ease;
}

/* 徽章样式 */
.badge[b-pm8g8n5wz4] {
    padding: 6px 12px;
    font-weight: 500;
}

/* 趋势可视化 */
.trend-visualization[b-pm8g8n5wz4] {
    padding: 20px 0;
}

.trend-bar-container[b-pm8g8n5wz4] {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}

.trend-date[b-pm8g8n5wz4] {
    width: 80px;
    font-size: 13px;
    font-weight: 500;
    color: #666;
    text-align: right;
}

.trend-bar-wrapper[b-pm8g8n5wz4] {
    flex: 1;
    background: #f0f0f0;
    height: 32px;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.trend-bar[b-pm8g8n5wz4] {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: white;
    font-weight: 600;
    font-size: 13px;
    transition: width 0.6s ease;
    border-radius: 4px;
}

.trend-value[b-pm8g8n5wz4] {
    white-space: nowrap;
}

/* 模态框样式 */
.modal.show[b-pm8g8n5wz4] {
    display: block;
}

.modal-dialog[b-pm8g8n5wz4] {
    margin-top: 60px;
}

/* 分析摘要 */
.analysis-item[b-pm8g8n5wz4] {
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #3498db;
}

.analysis-item ul[b-pm8g8n5wz4] {
    margin-bottom: 0;
    padding-left: 20px;
}

.analysis-item li[b-pm8g8n5wz4] {
    margin-bottom: 8px;
    color: #555;
}

/* 手风琴样式 */
.accordion-button:not(.collapsed)[b-pm8g8n5wz4] {
    background-color: #e7f3ff;
    color: #0056b3;
}

.accordion-button:focus[b-pm8g8n5wz4] {
    box-shadow: none;
    border-color: #3498db;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .summary-cards[b-pm8g8n5wz4] {
        grid-template-columns: 1fr;
    }
    
    .stat-card[b-pm8g8n5wz4] {
        padding: 16px;
    }
    
    .stat-icon[b-pm8g8n5wz4] {
        font-size: 36px;
    }
    
    .stat-value[b-pm8g8n5wz4] {
        font-size: 24px;
    }
    
    .filter-panel .col-md-3[b-pm8g8n5wz4],
    .filter-panel .col-md-2[b-pm8g8n5wz4] {
        margin-bottom: 12px;
    }
    
    .trend-date[b-pm8g8n5wz4] {
        width: 60px;
        font-size: 11px;
    }
    
    .trend-bar[b-pm8g8n5wz4] {
        font-size: 11px;
        padding: 0 8px;
    }
}

/* 打印样式 */
@media print {
    .filter-panel[b-pm8g8n5wz4],
    .btn[b-pm8g8n5wz4],
    .nav-tabs[b-pm8g8n5wz4] {
        display: none;
    }
    
    .stat-card[b-pm8g8n5wz4] {
        break-inside: avoid;
    }
    
    .table[b-pm8g8n5wz4] {
        font-size: 10px;
    }
}

/* 卡片样式 */
.card[b-pm8g8n5wz4] {
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
}

.card-header[b-pm8g8n5wz4] {
    background-color: #f8f9fa;
    border-bottom: 2px solid #e0e0e0;
    padding: 16px 20px;
}

.card-header h5[b-pm8g8n5wz4] {
    margin-bottom: 0;
    color: #2c3e50;
}

/* 动画效果 */
@keyframes fadeIn-b-pm8g8n5wz4 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.statistics-results[b-pm8g8n5wz4],
.filter-panel[b-pm8g8n5wz4],
.stat-card[b-pm8g8n5wz4] {
    animation: fadeIn-b-pm8g8n5wz4 0.3s ease-out;
}

/* 统计Tab容器 */
.statistics-tab[b-pm8g8n5wz4] {
    min-height: 400px;
}

/* 工具提示 */
[title][b-pm8g8n5wz4] {
    cursor: help;
}

/* 表格排序按钮 */
.btn-group .btn[b-pm8g8n5wz4] {
    font-size: 13px;
}

/* 空状态样式 */
.alert[b-pm8g8n5wz4] {
    border-radius: 8px;
}

.alert-info[b-pm8g8n5wz4] {
    background-color: #e7f3ff;
    border-color: #b3d9ff;
    color: #004085;
}

.alert-danger[b-pm8g8n5wz4] {
    background-color: #ffe7e7;
    border-color: #ffb3b3;
    color: #721c24;
}
/* /Components/Pages/Courses/VideoListItem.razor.rz.scp.css */
/* ========== 统一视频项样式（PC端和移动端共用） ========== */
.video-item[b-aqmcfln7nq] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    margin-bottom: 8px;
}

.video-item:hover[b-aqmcfln7nq] {
    background: #f9fafb;
    transform: translateX(2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.video-item.selected[b-aqmcfln7nq] {
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

/* ========== 播放状态指示器 ========== */
.play-indicator[b-aqmcfln7nq] {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 正在播放动画 */
.playing-animation[b-aqmcfln7nq] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 20px;
}

.playing-animation span[b-aqmcfln7nq] {
    width: 3px;
    background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 2px;
    animation: soundWave-b-aqmcfln7nq 1.2s ease-in-out infinite;
}

.playing-animation span:nth-child(1)[b-aqmcfln7nq] {
    height: 40%;
    animation-delay: 0s;
}

.playing-animation span:nth-child(2)[b-aqmcfln7nq] {
    height: 70%;
    animation-delay: 0.2s;
}

.playing-animation span:nth-child(3)[b-aqmcfln7nq] {
    height: 50%;
    animation-delay: 0.4s;
}

@keyframes soundWave-b-aqmcfln7nq {
    0%, 100% { 
        transform: scaleY(1);
        opacity: 0.8;
    }
    50% { 
        transform: scaleY(1.5);
        opacity: 1;
    }
}

/* 播放图标 */
.play-icon[b-aqmcfln7nq] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
}

.video-item:hover .play-icon[b-aqmcfln7nq] {
    background: #e0e7ff;
    color: #6366f1;
    transform: scale(1.1);
}

/* ========== 视频信息区 ========== */
.video-info[b-aqmcfln7nq] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.video-title[b-aqmcfln7nq] {
    font-size: 15px;
    font-weight: 500;
    color: #111827;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.2s ease;
}

.video-item.selected .video-title[b-aqmcfln7nq] {
    color: #4f46e5;
    font-weight: 600;
}

.video-meta[b-aqmcfln7nq] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.meta-tag[b-aqmcfln7nq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    background: #f3f4f6;
    color: #6b7280;
    transition: all 0.2s ease;
}

.meta-tag .icon[b-aqmcfln7nq] {
    width: 12px;
    height: 12px;
}

.meta-tag.duration[b-aqmcfln7nq] {
    background: transparent;
    padding: 0 4px 0 0;
    color: #9ca3af;
}

.video-item.selected .meta-tag.duration[b-aqmcfln7nq] {
    color: #6366f1;
}

.meta-tag.live[b-aqmcfln7nq] {
    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
    color: #dc2626;
    font-weight: 600;
}

.live-dot[b-aqmcfln7nq] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #dc2626;
    animation: livePulse-b-aqmcfln7nq 2s ease-in-out infinite;
}

@keyframes livePulse-b-aqmcfln7nq {
    0%, 100% { 
        opacity: 1;
        transform: scale(1);
    }
    50% { 
        opacity: 0.6;
        transform: scale(1.2);
    }
}

.meta-tag.replay[b-aqmcfln7nq] {
    background: #dbeafe;
    color: #2563eb;
}

.meta-tag.free[b-aqmcfln7nq] {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    color: #059669;
    font-weight: 600;
}

.meta-tag.children[b-aqmcfln7nq] {
    background: #ede9fe;
    color: #7c3aed;
}

.video-item.selected .meta-tag.children[b-aqmcfln7nq] {
    background: #ddd6fe;
    color: #6d28d9;
}

/* ========== 观看进度条 ========== */
.progress-bar-container[b-aqmcfln7nq] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.progress-bar-bg[b-aqmcfln7nq] {
    flex: 1;
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-fill[b-aqmcfln7nq] {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-bar-fill[b-aqmcfln7nq]::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
    animation: progressShimmer-b-aqmcfln7nq 2s ease-in-out infinite;
}

@keyframes progressShimmer-b-aqmcfln7nq {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.progress-text[b-aqmcfln7nq] {
    flex-shrink: 0;
    font-size: 11px;
    font-weight: 600;
    color: #6366f1;
    min-width: 32px;
    text-align: right;
}

/* ========== 展开按钮 ========== */
.expand-btn[b-aqmcfln7nq] {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expand-btn:hover[b-aqmcfln7nq] {
    background: #f3f4f6;
    color: #6366f1;
}

.video-item.selected .expand-btn:hover[b-aqmcfln7nq] {
    background: rgba(99, 102, 241, 0.1);
}

.expand-icon[b-aqmcfln7nq] {
    width: 16px;
    height: 16px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.expand-icon.expanded[b-aqmcfln7nq] {
    transform: rotate(180deg);
}

/* ========== 子视频容器 ========== */
.video-children[b-aqmcfln7nq] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0 4px 20px;
    margin-left: 20px;
    border-left: 2px solid #e5e7eb;
}

.video-children .video-item[b-aqmcfln7nq] {
    background: #fafafa;
    margin-bottom: 4px;
}

.video-children .video-item:hover[b-aqmcfln7nq] {
    background: #f3f4f6;
}

.video-children .video-item.selected[b-aqmcfln7nq] {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
}

/* ========== 层级样式 ========== */
.video-item.level-1[b-aqmcfln7nq] {
    padding: 10px 14px;
}

.video-item.level-1 .play-indicator[b-aqmcfln7nq] {
    width: 32px;
    height: 32px;
}

.video-item.level-1 .video-title[b-aqmcfln7nq] {
    font-size: 14px;
}

.video-item.level-2[b-aqmcfln7nq] {
    padding: 8px 12px;
}

.video-item.level-2 .play-indicator[b-aqmcfln7nq] {
    width: 28px;
    height: 28px;
}

.video-item.level-2 .video-title[b-aqmcfln7nq] {
    font-size: 13px;
}

.video-item.level-2 .meta-tag[b-aqmcfln7nq] {
    font-size: 11px;
    padding: 2px 6px;
}

/* ========== 响应式优化 ========== */
@media (max-width: 768px) {
    .video-item[b-aqmcfln7nq] {
        padding: 10px 14px;
        gap: 10px;
    }

    .play-indicator[b-aqmcfln7nq] {
        width: 32px;
        height: 32px;
    }

    .video-title[b-aqmcfln7nq] {
        font-size: 14px;
    }

    .meta-tag[b-aqmcfln7nq] {
        font-size: 11px;
        padding: 2px 6px;
    }

    .expand-btn[b-aqmcfln7nq] {
        width: 28px;
        height: 28px;
    }

    .expand-icon[b-aqmcfln7nq] {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .video-item[b-aqmcfln7nq] {
        padding: 10px 12px;
        gap: 8px;
        border-radius: 8px;
    }

    .play-indicator[b-aqmcfln7nq] {
        width: 28px;
        height: 28px;
    }

    .playing-animation[b-aqmcfln7nq] {
        height: 16px;
    }

    .playing-animation span[b-aqmcfln7nq] {
        width: 2px;
    }

    .play-icon[b-aqmcfln7nq] {
        width: 24px;
        height: 24px;
        font-size: 11px;
    }

    .video-title[b-aqmcfln7nq] {
        font-size: 13px;
    }

    .meta-tag[b-aqmcfln7nq] {
        font-size: 10px;
        padding: 2px 6px;
        gap: 2px;
    }

    .meta-tag .icon[b-aqmcfln7nq] {
        width: 10px;
        height: 10px;
    }

    .progress-bar-bg[b-aqmcfln7nq] {
        height: 3px;
    }

    .progress-text[b-aqmcfln7nq] {
        font-size: 10px;
        min-width: 28px;
    }

    .expand-btn[b-aqmcfln7nq] {
        width: 24px;
        height: 24px;
    }

    .expand-icon[b-aqmcfln7nq] {
        width: 12px;
        height: 12px;
    }

    .video-children[b-aqmcfln7nq] {
        padding-left: 16px;
        margin-left: 12px;
    }
}
/* /Components/Pages/Courses/VideoPlayer.razor.rz.scp.css */
/* ========== 全局容器 ========== */
.video-player-container[b-b8lta7ay0g] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf3 100%);
    /* 固定padding用于移动端和小屏 */
    padding: 20px;
    margin: 0;
    /* 使用flex布局实现内容居中 */
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

/* ========== 加载和错误状态 ========== */
.error-state[b-b8lta7ay0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 40px 20px;
}

/* ========== 骨架屏样式 ========== */
.skeleton-loading[b-b8lta7ay0g] {
    width: 100%;
    max-width: 1680px;
    position: relative;
}

/* PC端骨架屏布局 */
.skeleton-main-layout[b-b8lta7ay0g] {
    display: flex;
    gap: 24px;
    width: 100%;
}

.skeleton-main-content[b-b8lta7ay0g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* 播放器骨架 */
.skeleton-player[b-b8lta7ay0g] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.skeleton-player-wrapper[b-b8lta7ay0g] {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #1a1a1a;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skeleton-shimmer[b-b8lta7ay0g] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    animation: shimmer-b-b8lta7ay0g 2s infinite;
}

.skeleton-play-icon[b-b8lta7ay0g] {
    width: 80px;
    height: 80px;
    color: rgba(255, 255, 255, 0.3);
    z-index: 1;
    animation: pulse-b-b8lta7ay0g 2s ease-in-out infinite;
}

.skeleton-play-icon svg[b-b8lta7ay0g] {
    width: 100%;
    height: 100%;
}

/* 控制栏骨架 */
.skeleton-controls[b-b8lta7ay0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: #f9fafb;
    gap: 24px;
}

.skeleton-controls-info[b-b8lta7ay0g] {
    flex: 1;
}

.skeleton-title[b-b8lta7ay0g] {
    height: 24px;
    width: 60%;
    background: #e5e7eb;
    border-radius: 6px;
    margin-bottom: 12px;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
}

.skeleton-meta[b-b8lta7ay0g] {
    display: flex;
    gap: 16px;
}

.skeleton-meta-item[b-b8lta7ay0g] {
    height: 16px;
    width: 100px;
    background: #e5e7eb;
    border-radius: 4px;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
}

.skeleton-meta-item:nth-child(2)[b-b8lta7ay0g] {
    width: 120px;
    animation-delay: 0.1s;
}

.skeleton-nav-buttons[b-b8lta7ay0g] {
    display: flex;
    gap: 12px;
}

.skeleton-nav-btn[b-b8lta7ay0g] {
    height: 40px;
    width: 100px;
    background: #e5e7eb;
    border-radius: 10px;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
}

.skeleton-nav-btn:nth-child(2)[b-b8lta7ay0g] {
    animation-delay: 0.1s;
}

/* Tab区域骨架 */
.skeleton-tabs[b-b8lta7ay0g] {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    min-height: 400px;
}

.skeleton-tabs-header[b-b8lta7ay0g] {
    display: flex;
    gap: 8px;
    padding: 16px 24px;
    border-bottom: 2px solid #f3f4f6;
}

.skeleton-tab[b-b8lta7ay0g] {
    height: 36px;
    width: 100px;
    background: #e5e7eb;
    border-radius: 8px;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
}

.skeleton-tab:nth-child(2)[b-b8lta7ay0g] {
    animation-delay: 0.1s;
}

.skeleton-tab:nth-child(3)[b-b8lta7ay0g] {
    animation-delay: 0.2s;
}

.skeleton-tabs-content[b-b8lta7ay0g] {
    padding: 24px;
}

.skeleton-comment-item[b-b8lta7ay0g] {
    height: 80px;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 16px;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
}

.skeleton-comment-item:nth-child(2)[b-b8lta7ay0g] {
    animation-delay: 0.2s;
}

.skeleton-comment-item:nth-child(3)[b-b8lta7ay0g] {
    animation-delay: 0.4s;
}

/* 右侧目录骨架 */
.skeleton-sidebar[b-b8lta7ay0g] {
    width: 400px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.skeleton-sidebar-header[b-b8lta7ay0g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
}

.skeleton-sidebar-title[b-b8lta7ay0g] {
    height: 24px;
    width: 140px;
    background: #e5e7eb;
    border-radius: 6px;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
}

.skeleton-badge[b-b8lta7ay0g] {
    height: 24px;
    width: 50px;
    background: #e5e7eb;
    border-radius: 12px;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
    animation-delay: 0.1s;
}

.skeleton-catalog-list[b-b8lta7ay0g] {
    padding: 12px;
}

.skeleton-video-item[b-b8lta7ay0g] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 12px;
    margin-bottom: 8px;
}

.skeleton-video-icon[b-b8lta7ay0g] {
    width: 40px;
    height: 40px;
    background: #e5e7eb;
    border-radius: 8px;
    flex-shrink: 0;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
}

.skeleton-video-info[b-b8lta7ay0g] {
    flex: 1;
}

.skeleton-video-title[b-b8lta7ay0g] {
    height: 16px;
    width: 80%;
    background: #e5e7eb;
    border-radius: 4px;
    margin-bottom: 8px;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
}

.skeleton-video-meta[b-b8lta7ay0g] {
    height: 12px;
    width: 60%;
    background: #e5e7eb;
    border-radius: 4px;
    animation: pulse-bg-b-b8lta7ay0g 1.5s ease-in-out infinite;
    animation-delay: 0.1s;
}

/* 移动端骨架屏 */
.skeleton-mobile-layout[b-b8lta7ay0g] {
    display: none;
}

.skeleton-mobile-tabs[b-b8lta7ay0g] {
    background: #fff;
    margin-top: 0;
}

.skeleton-mobile-tabs .skeleton-tabs-header[b-b8lta7ay0g] {
    display: flex;
    justify-content: space-around;
    padding: 12px;
    border-bottom: 1px solid #e5e7eb;
}

.skeleton-mobile-tabs .skeleton-tab[b-b8lta7ay0g] {
    width: 80px;
    height: 40px;
}

/* 加载提示 */
.skeleton-loading-hint[b-b8lta7ay0g] {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 1000;
}

.skeleton-loading-hint p[b-b8lta7ay0g] {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
}

.loading-dots[b-b8lta7ay0g] {
    display: flex;
    gap: 6px;
    align-items: center;
}

.loading-dots span[b-b8lta7ay0g] {
    width: 8px;
    height: 8px;
    background: #6366f1;
    border-radius: 50%;
    animation: bounce-b-b8lta7ay0g 1.4s infinite ease-in-out;
}

.loading-dots span:nth-child(1)[b-b8lta7ay0g] {
    animation-delay: -0.32s;
}

.loading-dots span:nth-child(2)[b-b8lta7ay0g] {
    animation-delay: -0.16s;
}

/* 骨架屏动画 */
@keyframes shimmer-b-b8lta7ay0g {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

@keyframes pulse-bg-b-b8lta7ay0g {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes bounce-b-b8lta7ay0g {
    0%, 80%, 100% {
        transform: scale(0);
        opacity: 0.5;
    }
    40% {
        transform: scale(1);
        opacity: 1;
    }
}

.error-icon[b-b8lta7ay0g] {
    font-size: 64px;
    margin-bottom: 20px;
}

.error-title[b-b8lta7ay0g] {
    font-size: 24px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.error-message[b-b8lta7ay0g] {
    font-size: 16px;
    color: #6b7280;
    margin-bottom: 24px;
    text-align: center;
    max-width: 500px;
}

.back-btn[b-b8lta7ay0g] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.back-btn:hover[b-b8lta7ay0g] {
    background: #4f46e5;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

.back-icon[b-b8lta7ay0g] {
    font-size: 20px;
}

/* ========== 主布局 ========== */
.main-layout[b-b8lta7ay0g] {
    display: flex;
    gap: 24px;
    /* 设置主内容区域的最大宽度,避免播放器过度拉伸 */
    width: 100%;
    max-width: 1680px; /* 主内容最大宽度: 适合16:9播放器的最佳观看尺寸 */
    min-height: calc(100vh - 100px);
    background: transparent;
    /* 当屏幕超过max-width时,容器会自动居中,两侧自然留白 */
}

.main-content[b-b8lta7ay0g] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background: transparent;
}

/* ========== 播放器区域 ========== */
.player-section[b-b8lta7ay0g] {
    background: #000;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.player-wrapper[b-b8lta7ay0g] {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    position: relative;
}

.video-player[b-b8lta7ay0g] {
    width: 100%;
    height: 100%;
}

/* ========== 视频控制栏 ========== */
.video-controls-bar[b-b8lta7ay0g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    background: #1f2937;
    gap: 24px;
}

.video-info[b-b8lta7ay0g] {
    flex: 1;
    min-width: 0;
}

.video-title[b-b8lta7ay0g] {
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 8px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.video-meta[b-b8lta7ay0g] {
    display: flex;
    gap: 20px;
    align-items: center;
}

.meta-item[b-b8lta7ay0g] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #9ca3af;
}

.meta-item .icon[b-b8lta7ay0g] {
    width: 16px;
    height: 16px;
    stroke-width: 2;
}

/* ========== 导航按钮 ========== */
.video-nav-buttons[b-b8lta7ay0g] {
    display: flex;
    gap: 12px;
    margin-left: 24px;
}

.nav-btn[b-b8lta7ay0g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: #374151;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-btn:hover:not(:disabled)[b-b8lta7ay0g] {
    background: #4b5563;
    transform: translateY(-2px);
}

.nav-btn:disabled[b-b8lta7ay0g] {
    background: #1f2937;
    color: #4b5563;
    cursor: not-allowed;
    opacity: 0.5;
}

.nav-btn svg[b-b8lta7ay0g] {
    width: 20px;
    height: 20px;
}

/* ========== Tab区域 ========== */
.tabs-section[b-b8lta7ay0g] {
    flex: 1;
    background: #fff;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.mobile-layout[b-b8lta7ay0g] {
    display: none;
}

.tabs-container[b-b8lta7ay0g] {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.tabs-header[b-b8lta7ay0g] {
    display: flex;
    background: #fff;
    border-bottom: 2px solid #f3f4f6;
    padding: 0 24px;
}

.tab-button[b-b8lta7ay0g] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 15px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.tab-button:hover[b-b8lta7ay0g] {
    color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

.tab-button.active[b-b8lta7ay0g] {
    color: #6366f1;
    border-bottom-color: #6366f1;
}

.tab-icon[b-b8lta7ay0g] {
    width: 20px;
    height: 20px;
}

.tabs-content[b-b8lta7ay0g] {
    flex: 1;
    overflow-y: auto;
}

.tab-panel[b-b8lta7ay0g] {
    padding: 32px;
    animation: fadeIn-b-b8lta7ay0g 0.3s ease;
}

/* ========== 右侧课程目录 ========== */
.sidebar-catalog[b-b8lta7ay0g] {
    width: 400px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
    position: sticky;
    top: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.catalog-header[b-b8lta7ay0g] {
    padding: 20px 24px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
}

.catalog-title-row[b-b8lta7ay0g] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.catalog-icon[b-b8lta7ay0g] {
    width: 22px;
    height: 22px;
    color: #6366f1;
}

.catalog-title[b-b8lta7ay0g] {
    flex: 1;
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.video-count-badge[b-b8lta7ay0g] {
    padding: 4px 12px;
    background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
    color: #6366f1;
    font-size: 13px;
    font-weight: 600;
    border-radius: 20px;
}

/* ========== 课程组选择器 ========== */
.group-selector[b-b8lta7ay0g] {
    padding: 16px 24px;
    background: #fafafa;
    border-bottom: 1px solid #e5e7eb;
}

.group-selector-header[b-b8lta7ay0g] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.selector-icon[b-b8lta7ay0g] {
    width: 16px;
    height: 16px;
    color: #6b7280;
}

.selector-label[b-b8lta7ay0g] {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.group-select[b-b8lta7ay0g] {
    width: 100%;
    padding: 10px 14px;
    background: #fff;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.group-select:hover[b-b8lta7ay0g] {
    border-color: #c7d2fe;
    background-color: #fafafa;
}

.group-select:focus[b-b8lta7ay0g] {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.group-tab[b-b8lta7ay0g] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
}

.group-tab:hover[b-b8lta7ay0g] {
    border-color: #e5e7eb;
    transform: translateX(4px);
}

.group-tab.active[b-b8lta7ay0g] {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(139, 92, 246, 0.08) 100%);
    border-color: #6366f1;
}

.group-tab-content[b-b8lta7ay0g] {
    flex: 1;
}

.group-tab-title[b-b8lta7ay0g] {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 6px;
    line-height: 1.3;
}

.group-tab.active .group-tab-title[b-b8lta7ay0g] {
    color: #6366f1;
}

.group-tab-meta[b-b8lta7ay0g] {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #6b7280;
}

.video-count[b-b8lta7ay0g],
.group-progress[b-b8lta7ay0g] {
    display: flex;
    align-items: center;
}

.group-tab.active .video-count[b-b8lta7ay0g],
.group-tab.active .group-progress[b-b8lta7ay0g] {
    color: #6366f1;
    font-weight: 600;
}

.active-indicator[b-b8lta7ay0g] {
    width: 4px;
    height: 24px;
    background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
    border-radius: 2px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
}

/* ========== 课程目录列表 ========== */
.catalog-list[b-b8lta7ay0g] {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    background: #fafafa;
}

/* ========== 课程目录视频列表容器 ========== */
.catalog-list .video-list[b-b8lta7ay0g] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* ========== 移动端视频列表容器（已迁移到VideoListItemMobile.razor.css） ========== */
/* 移动端视频列表项的样式已经迁移到独立组件 VideoListItemMobile.razor.css */
.video-list-mobile[b-b8lta7ay0g] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ========== 播放图标区域（旧样式，保留用于向后兼容） ========== */
.play-icon-wrapper[b-b8lta7ay0g] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.play-icon[b-b8lta7ay0g] {
    width: 32px;
    height: 32px;
    transition: all 0.3s ease;
}

.video-list-item:hover .play-icon[b-b8lta7ay0g] {
    transform: scale(1.1);
}

.video-list-item.selected .play-icon[b-b8lta7ay0g] {
    animation: pulse-b-b8lta7ay0g 2s infinite;
}

/* ========== 播放中指示器 ========== */
.playing-indicator[b-b8lta7ay0g] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    height: 20px;
}

.playing-indicator span[b-b8lta7ay0g] {
    width: 3px;
    background: #6366f1;
    border-radius: 2px;
    animation: soundWave-b-b8lta7ay0g 1s ease-in-out infinite;
}

.playing-indicator span:nth-child(1)[b-b8lta7ay0g] {
    height: 60%;
    animation-delay: 0s;
}

.playing-indicator span:nth-child(2)[b-b8lta7ay0g] {
    height: 100%;
    animation-delay: 0.2s;
}

.playing-indicator span:nth-child(3)[b-b8lta7ay0g] {
    height: 80%;
    animation-delay: 0.4s;
}

@keyframes soundWave-b-b8lta7ay0g {
    0%, 100% { height: 60%; }
    50% { height: 100%; }
}

/* ========== 视频内容 ========== */
.video-content[b-b8lta7ay0g] {
    flex: 1;
    min-width: 0;
}

.video-title-row[b-b8lta7ay0g] {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    margin-bottom: 4px;
}

.video-number[b-b8lta7ay0g] {
    font-size: 14px;
    font-weight: 600;
    color: #6366f1;
    flex-shrink: 0;
}

.video-title-text[b-b8lta7ay0g] {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.video-list-item.selected .video-title-text[b-b8lta7ay0g] {
    color: #6366f1;
}

.video-duration[b-b8lta7ay0g] {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    flex-shrink: 0;
    padding: 4px 8px;
    background: #e5e7eb;
    border-radius: 6px;
}

.video-list-item.selected .video-duration[b-b8lta7ay0g] {
    background: rgba(99, 102, 241, 0.2);
    color: #6366f1;
}

/* ========== 子视频展开按钮 ========== */
.expand-sub-btn[b-b8lta7ay0g] {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e5e7eb;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.expand-sub-btn:hover[b-b8lta7ay0g] {
    background: #d1d5db;
    transform: scale(1.05);
}

.expand-arrow[b-b8lta7ay0g] {
    width: 20px;
    height: 20px;
    color: #6b7280;
    transition: transform 0.3s ease;
}

.expand-arrow.expanded[b-b8lta7ay0g] {
    transform: rotate(180deg);
}

/* ========== 子视频列表 ========== */
.sub-videos-list[b-b8lta7ay0g] {
    margin-left: 52px;
    margin-top: 4px;
    padding-left: 12px;
    border-left: 2px solid #e5e7eb;
}

.sub-videos-list .video-list-item[b-b8lta7ay0g] {
    background: #fff;
}

.sub-videos-list .video-list-item:hover[b-b8lta7ay0g] {
    background: #f9fafb;
}

/* ========== 空状态 ========== */
.empty-state[b-b8lta7ay0g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #9ca3af;
}

.empty-icon[b-b8lta7ay0g] {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.empty-state p[b-b8lta7ay0g] {
    font-size: 16px;
    margin: 0;
}

/* ========== 响应式断点优化 ========== */

/* 超宽屏优化 (>2560px) - 增加两侧留白 */
@media (min-width: 2561px) {
    .video-player-container[b-b8lta7ay0g] {
        /* 超宽屏时增加padding,让内容区域保持在中央 */
        padding: 60px;
    }
    
    .skeleton-loading-hint[b-b8lta7ay0g] {
        bottom: 60px;
    }
}

/* 大屏优化 (1920px - 2560px) - 适度增加留白 */
@media (min-width: 1921px) and (max-width: 2560px) {
    .video-player-container[b-b8lta7ay0g] {
        padding: 40px;
    }
}

/* 标准PC (1440px - 1920px) - 标准留白 */
@media (min-width: 1441px) and (max-width: 1920px) {
    .video-player-container[b-b8lta7ay0g] {
        padding: 30px;
    }
}

/* 小屏PC (1025px - 1440px) - 较小留白 */
@media (min-width: 1025px) and (max-width: 1440px) {
    .video-player-container[b-b8lta7ay0g] {
        padding: 20px;
    }
    
    .main-layout[b-b8lta7ay0g] {
        max-width: 1440px; /* 小屏PC上稍微限制宽度 */
    }
}

/* ========== 移动端布局 ========== */
/* ========== 平板端优化 (768px - 1024px) ========== */
@media (max-width: 1024px) and (min-width: 769px) {
    .video-player-container[b-b8lta7ay0g] {
        /* 平板端适中的padding */
        padding: 16px;
    }
    
    .main-layout[b-b8lta7ay0g] {
        gap: 16px;
        max-width: 100%; /* 平板上占满宽度 */
    }
    
    .main-content[b-b8lta7ay0g] {
        gap: 16px;
    }
}

/* ========== 移动端布局切换 (≤1024px) ========== */
@media (max-width: 1024px) {
    .video-player-container[b-b8lta7ay0g] {
        display: block; /* 取消flex居中 */
    }
    
    .main-layout[b-b8lta7ay0g] {
        flex-direction: column;
        min-height: auto;
        gap: 0;
        max-width: 100%; /* 移动端占满宽度 */
    }

    .sidebar-catalog[b-b8lta7ay0g] {
        display: none;
    }

    .main-content[b-b8lta7ay0g] {
        width: 100%;
        min-height: auto;
        display: block;
    }

    /* 隐藏PC端的Tab区域 */
    .tabs-section[b-b8lta7ay0g] {
        display: none;
    }

    /* 显示移动端Tab */
    .mobile-layout[b-b8lta7ay0g] {
        display: block;
    }

    .video-controls-bar[b-b8lta7ay0g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 20px;
    }

    .video-nav-buttons[b-b8lta7ay0g] {
        width: 100%;
        margin-left: 0;
    }

    .nav-btn[b-b8lta7ay0g] {
        flex: 1;
        justify-content: center;
    }

    .video-title[b-b8lta7ay0g] {
        font-size: 18px;
    }

    .video-meta[b-b8lta7ay0g] {
        flex-wrap: wrap;
    }
    
    /* 骨架屏响应式 */
    .skeleton-main-layout[b-b8lta7ay0g] {
        display: none;
    }

    .skeleton-mobile-layout[b-b8lta7ay0g] {
        display: block;
    }

    .skeleton-controls[b-b8lta7ay0g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 16px 20px;
    }

    .skeleton-nav-buttons[b-b8lta7ay0g] {
        width: 100%;
    }

    .skeleton-nav-btn[b-b8lta7ay0g] {
        flex: 1;
    }

    .skeleton-loading-hint[b-b8lta7ay0g] {
        bottom: 20px;
        padding: 12px 24px;
    }
}

/* ========== 移动端Tab容器 ========== */
.mobile-tabs-container[b-b8lta7ay0g] {
    background: #fff;
    overflow: hidden;
    margin-top: 0;
}

.mobile-tabs-header[b-b8lta7ay0g] {
    display: flex;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.mobile-tab-button[b-b8lta7ay0g] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mobile-tab-button.active[b-b8lta7ay0g] {
    color: #6366f1;
    border-bottom-color: #6366f1;
    background: rgba(99, 102, 241, 0.05);
}

.mobile-tab-button .tab-icon[b-b8lta7ay0g] {
    width: 22px;
    height: 22px;
}

.mobile-tabs-content[b-b8lta7ay0g] {
    min-height: 400px;
}

.mobile-tab-panel[b-b8lta7ay0g] {
    padding: 20px;
    animation: fadeIn-b-b8lta7ay0g 0.3s ease;
}

/* ========== 移动端课程目录 ========== */
.catalog-header-mobile[b-b8lta7ay0g] {
    margin-bottom: 20px;
}

.catalog-stats-mobile[b-b8lta7ay0g] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
}

.stat-divider[b-b8lta7ay0g] {
    opacity: 0.5;
}

.group-selector-mobile[b-b8lta7ay0g] {
    margin-bottom: 16px;
}

.video-list-mobile .video-list-item[b-b8lta7ay0g] {
    background: #f9fafb;
}

/* ========== 动画效果 ========== */
@keyframes spin-b-b8lta7ay0g {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fadeIn-b-b8lta7ay0g {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-b-b8lta7ay0g {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

/* ========== 滚动条样式 ========== */
.catalog-list[b-b8lta7ay0g]::-webkit-scrollbar,
.tabs-content[b-b8lta7ay0g]::-webkit-scrollbar {
    width: 6px;
}

.catalog-list[b-b8lta7ay0g]::-webkit-scrollbar-track,
.tabs-content[b-b8lta7ay0g]::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.catalog-list[b-b8lta7ay0g]::-webkit-scrollbar-thumb,
.tabs-content[b-b8lta7ay0g]::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.catalog-list[b-b8lta7ay0g]::-webkit-scrollbar-thumb:hover,
.tabs-content[b-b8lta7ay0g]::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ========== 响应式优化 ========== */
/* ========== 小屏移动端 (≤768px) ========== */
@media (max-width: 768px) {
    /* 移动端完全取消容器padding,内容占满屏幕 */
    .video-player-container[b-b8lta7ay0g] {
        padding: 0;
    }
    
    .main-layout[b-b8lta7ay0g] {
        gap: 0;
    }
    
    .main-content[b-b8lta7ay0g] {
        gap: 0;
    }
    
    /* 播放器区域和Tab区域也移除圆角和阴影,实现无缝布局 */
    .player-section[b-b8lta7ay0g],
    .tabs-section[b-b8lta7ay0g] {
        border-radius: 0;
        box-shadow: none;
    }
    
    /* 移动端Tab容器也移除圆角 */
    .mobile-tabs-container[b-b8lta7ay0g] {
        border-radius: 0;
    }

    /* 移动端课程组选择器 */
    .catalog-stats-mobile[b-b8lta7ay0g] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px 16px;
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
    }

    .stat-icon[b-b8lta7ay0g] {
        width: 18px;
        height: 18px;
        color: #6366f1;
    }

    .stat-text[b-b8lta7ay0g] {
        flex: 1;
        font-size: 13px;
        font-weight: 600;
        color: #6b7280;
    }

    .group-selector-mobile[b-b8lta7ay0g] {
        padding: 12px 16px;
        background: #fafafa;
        border-bottom: 1px solid #e5e7eb;
    }

    .group-selector-mobile .selector-label[b-b8lta7ay0g] {
        display: block;
        margin-bottom: 8px;
        font-size: 12px;
        font-weight: 600;
        color: #6b7280;
    }

    .group-select-mobile[b-b8lta7ay0g] {
        width: 100%;
        padding: 10px 12px;
        background: #fff;
        border: 2px solid #e5e7eb;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 500;
        color: #111827;
        cursor: pointer;
        transition: all 0.3s ease;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 10px center;
        padding-right: 36px;
    }

    .group-select-mobile:focus[b-b8lta7ay0g] {
        outline: none;
        border-color: #6366f1;
        box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
    }
    
    /* 骨架屏移动端优化 */
    .skeleton-player[b-b8lta7ay0g] {
        border-radius: 0;
    }

    .skeleton-mobile-tabs[b-b8lta7ay0g] {
        border-radius: 0;
    }

    .skeleton-tabs-content[b-b8lta7ay0g] {
        padding: 16px;
    }
}

@media (max-width: 480px) {
    .video-controls-bar[b-b8lta7ay0g] {
        padding: 12px 16px;
    }

    .video-title[b-b8lta7ay0g] {
        font-size: 16px;
    }

    .meta-item[b-b8lta7ay0g] {
        font-size: 12px;
    }

    .nav-btn[b-b8lta7ay0g] {
        padding: 8px 14px;
        font-size: 13px;
    }

    .mobile-tab-panel[b-b8lta7ay0g] {
        padding: 12px;
    }

    /* 移动端目录优化 */
    .catalog-item[b-b8lta7ay0g] {
        margin-bottom: 8px;
        border-radius: 8px;
    }

    .catalog-item-clickable[b-b8lta7ay0g] {
        padding: 8px 10px;
        gap: 8px;
        min-height: 54px;
    }

    .status-indicator[b-b8lta7ay0g] {
        width: 24px;
        height: 24px;
    }

    .status-badge[b-b8lta7ay0g] {
        width: 24px;
        height: 24px;
        border-radius: 6px;
    }

    .completed-badge svg[b-b8lta7ay0g] {
        width: 14px;
        height: 14px;
    }

    .playing-animation[b-b8lta7ay0g] {
        height: 12px;
        gap: 1.5px;
    }

    .playing-animation span[b-b8lta7ay0g] {
        width: 1.5px;
    }

    .progress-ring-svg[b-b8lta7ay0g] {
        width: 22px;
        height: 22px;
    }

    .progress-text[b-b8lta7ay0g] {
        font-size: 8px;
    }

    .unwatched-badge svg[b-b8lta7ay0g] {
        width: 12px;
        height: 12px;
    }

    .video-title-line[b-b8lta7ay0g] {
        font-size: 12px;
    }

    .video-subtitle-line[b-b8lta7ay0g] {
        font-size: 11px;
    }

    .meta-tag[b-b8lta7ay0g] {
        padding: 2px 5px;
        font-size: 9px;
        gap: 2px;
    }

    .duration-tag svg[b-b8lta7ay0g] {
        width: 10px;
        height: 10px;
    }

    .expand-toggle-btn[b-b8lta7ay0g] {
        width: 24px;
        height: 24px;
    }

    .expand-arrow-icon[b-b8lta7ay0g] {
        width: 16px;
        height: 16px;
    }

    .video-list-item[b-b8lta7ay0g] {
        padding: 10px 12px;
    }

    .play-icon-wrapper[b-b8lta7ay0g] {
        width: 36px;
        height: 36px;
    }

    .play-icon[b-b8lta7ay0g] {
        width: 28px;
        height: 28px;
    }

    .video-title-text[b-b8lta7ay0g] {
        font-size: 13px;
    }

    .catalog-stats-mobile[b-b8lta7ay0g] {
        font-size: 13px;
        padding: 10px;
    }
}

/* ========== 深色模式支持 (可选) ========== */
@media (prefers-color-scheme: dark) {
    /* 可以在这里添加深色模式样式 */
}

/* ========== 评论面板样式调整 ========== */
.comments-panel[b-b8lta7ay0g],
.comments-panel-mobile[b-b8lta7ay0g] {
    padding: 0 !important;
}

/* ========== 打印样式 ========== */
@media print {
    .video-controls-bar[b-b8lta7ay0g],
    .tabs-header[b-b8lta7ay0g],
    .mobile-tabs-header[b-b8lta7ay0g],
    .nav-btn[b-b8lta7ay0g] {
        display: none;
    }
}
/* /Components/Pages/Courses/_VideoItem.razor.rz.scp.css */
/* 样式已迁移至 VideoPlayer.razor.css，保留空文件避免重复编译输出 */
/* /Components/Pages/Login.razor.rz.scp.css */
.login-bg[b-ju3r75ygww] { 
    min-height:100vh; 
    background: radial-gradient(circle at 20% 20%, rgba(130,170,255,.35), transparent 60%),
                radial-gradient(circle at 80% 70%, rgba(120,90,255,.30), transparent 55%),
                linear-gradient(135deg,#f5f8ff 0%, #eef2ff 45%, #e8f2ff 100%);
    padding:32px 16px;
}
.glass-card[b-ju3r75ygww] {
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    background: linear-gradient(145deg, rgba(255,255,255,0.82), rgba(255,255,255,0.68));
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 22px;
    box-shadow: 0 8px 28px -6px rgba(45,55,130,0.18), 0 2px 6px -1px rgba(45,55,130,.12);
    animation: fadeIn-b-ju3r75ygww .7s ease;
}
.brand-avatar[b-ju3r75ygww] { background: linear-gradient(135deg,#5b8dff,#6f4bff); box-shadow:0 6px 16px -4px rgba(90,110,255,.45);} 
.qr-surface[b-ju3r75ygww] { display:flex; border-radius:20px; border:1.5px dashed var(--mud-palette-primary); background:linear-gradient(145deg,#ffffff,#f4f7ff);} 
.gradient-btn[b-ju3r75ygww] { background:linear-gradient(90deg,#5b8dff,#6f4bff,#8450ff); background-size:180% 180%; animation: gradientMove-b-ju3r75ygww 6s ease infinite; color:#fff; }
.gradient-btn:hover[b-ju3r75ygww] { filter:brightness(1.05); }
.fancy-tabs .mud-tabs-toolbar[b-ju3r75ygww] { border-bottom:none; }
.min-w-btn[b-ju3r75ygww] { min-width:116px; }
.text-primary-dark[b-ju3r75ygww] { color:#1a3360; }
.fw-600[b-ju3r75ygww] { font-weight:600; }
.muted-text[b-ju3r75ygww] { color: rgba(0,0,0,.52); }
.agreement-text[b-ju3r75ygww] { color: rgba(0,0,0,.44); letter-spacing:.5px; font-size:.70rem; line-height:1.2rem; }
.code-row[b-ju3r75ygww] { flex-wrap:nowrap; }
.code-input[b-ju3r75ygww] { flex:1 1 auto; }
.code-btn[b-ju3r75ygww] { height:56px; white-space:nowrap; }
@keyframes gradientMove-b-ju3r75ygww { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@keyframes fadeIn-b-ju3r75ygww { from { opacity:0; transform:translateY(12px);} to { opacity:1; transform:translateY(0);} }
@media (max-width:600px){ .glass-card[b-ju3r75ygww] { padding:0!important; } .code-row[b-ju3r75ygww] { flex-direction:row; } }
/* /Components/Pages/Profile/MyPlans.razor.rz.scp.css */
/* �ҵļƻ�ҳ����ʽ */
.my-plans-container[b-4umqhp7kn1] {
    padding: 24px;
    max-width: 1200px;
    margin: 0 auto;
    background: #FFFFFF;
    min-height: 100vh;
}

/* ҳ��ͷ�� */
.plans-header[b-4umqhp7kn1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 32px;
    background: #FFFFFF;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.page-title[b-4umqhp7kn1] {
    color: #2c3e50;
    font-weight: 700;
    margin: 0;
    font-size: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ����״̬ */
.loading-container[b-4umqhp7kn1] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.plan-skeleton-card[b-4umqhp7kn1] {
    min-height: 140px;
    border-radius: 20px;
    background: #FFFFFF;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

/* ��״̬ */
.empty-state-paper[b-4umqhp7kn1] {
    padding: 80px 40px;
    text-align: center;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(226, 232, 240, 0.6);
}

.empty-state[b-4umqhp7kn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.empty-title[b-4umqhp7kn1] {
    color: #34495e;
    margin: 16px 0 8px 0;
    font-weight: 600;
}

.empty-subtitle[b-4umqhp7kn1] {
    color: #7f8c8d;
    margin: 0 0 24px 0;
}

/* �ƻ��������� */
.plans-content[b-4umqhp7kn1] {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ѧ�Ʒ��� */
.discipline-section[b-4umqhp7kn1] {
    background: #FFFFFF;
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(226, 232, 240, 0.6);
    overflow: hidden;
    transition: all 0.3s ease;
}

.discipline-section:hover[b-4umqhp7kn1] {
    transform: translateY(-2px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    border-color: rgba(102, 126, 234, 0.2);
}

.discipline-header[b-4umqhp7kn1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28px 32px;
    background: #fafafa;
    border-bottom: none;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    position: relative;
    overflow: hidden;
}

.discipline-header[b-4umqhp7kn1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
    transition: left 0.5s;
}

.discipline-header:hover[b-4umqhp7kn1]::before {
    left: 100%;
}

.discipline-header:hover[b-4umqhp7kn1] {
    background: #f0f0f0;
}

.discipline-title-area[b-4umqhp7kn1] {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.discipline-title[b-4umqhp7kn1] {
    color: #2c3e50;
    font-weight: 700;
    margin: 0;
    font-size: 1.5rem;
}

.expand-btn[b-4umqhp7kn1] {
    color: #666 !important;
    transition: all 0.3s ease;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 12px;
}

.expand-btn:hover[b-4umqhp7kn1] {
    background: rgba(0, 0, 0, 0.1);
    transform: scale(1.1);
}

.year-filter[b-4umqhp7kn1] {
    min-width: 160px;
    margin-left: auto;
}

.year-select[b-4umqhp7kn1] {
    min-width: 160px;
}

.year-select .mud-input-slot[b-4umqhp7kn1] {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.year-select .mud-input[b-4umqhp7kn1] {
    color: #2c3e50;
}

.year-select .mud-input[b-4umqhp7kn1]::placeholder {
    color: rgba(44, 62, 80, 0.7);
}

/* �ƻ��б����� */
.plans-list[b-4umqhp7kn1] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    background: rgba(241, 245, 249, 0.5);
}

/* ��Ŀ��ǩ */
.subject-tabs[b-4umqhp7kn1] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    padding: 24px 32px 0;
    background: linear-gradient(to bottom, rgba(250, 250, 250, 0.8), transparent);
}

.subject-chip[b-4umqhp7kn1] {
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.8);
    color: #2c3e50;
    font-weight: 500;
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 8px 16px;
}

.subject-chip:hover[b-4umqhp7kn1] {
    border-color: rgba(102, 126, 234, 0.5);
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    color: #667eea;
}

.subject-chip.active[b-4umqhp7kn1] {
    border-color: #667eea;
    background: #667eea;
    color: white;
    font-weight: 700;
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.3);
}

/* �ƻ��б��� */
.plan-list-item[b-4umqhp7kn1] {
    border-radius: 24px;
    border: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    background: #FFFFFF;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.plan-list-item[b-4umqhp7kn1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.plan-list-item:hover[b-4umqhp7kn1] {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 6px 20px rgba(0, 0, 0, 0.08);
    border-color: rgba(102, 126, 234, 0.3);
}

.plan-list-item:hover[b-4umqhp7kn1]::before {
    transform: scaleX(1);
}

.plan-item-content[b-4umqhp7kn1] {
    padding: 32px !important;
}

.plan-list-header[b-4umqhp7kn1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 20px;
}

.plan-info-left[b-4umqhp7kn1] {
    flex: 1;
}

.plan-info-right[b-4umqhp7kn1] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.plan-title[b-4umqhp7kn1] {
    color: #2c3e50;
    font-weight: 700;
    margin: 0 0 18px 0;
    line-height: 1.4;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.plan-meta-row[b-4umqhp7kn1] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
}

.plan-meta-item[b-4umqhp7kn1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(102, 126, 234, 0.06);
    border-radius: 16px;
    transition: all 0.2s ease;
    border: 1px solid rgba(102, 126, 234, 0.08);
}

.plan-meta-item:hover[b-4umqhp7kn1] {
    background: rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
    border-color: rgba(102, 126, 234, 0.15);
}

.stage-item[b-4umqhp7kn1] {
    background: rgba(52, 73, 94, 0.06);
    border: 1px solid rgba(52, 73, 94, 0.08);
}

.stage-item:hover[b-4umqhp7kn1] {
    background: rgba(52, 73, 94, 0.1);
    border-color: rgba(52, 73, 94, 0.15);
}

.stage-item .meta-icon[b-4umqhp7kn1] {
    color: #34495e;
}

.meta-icon[b-4umqhp7kn1] {
    color: #667eea;
    flex-shrink: 0;
    font-size: 16px;
}

.meta-text[b-4umqhp7kn1] {
    color: #5a6c7d;
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.score-text[b-4umqhp7kn1] {
    color: #e74c3c;
    font-weight: 700;
    margin: 0;
    font-size: 14px;
}

.state-chip[b-4umqhp7kn1] {
    font-weight: 600;
    font-size: 13px;
    border-radius: 20px;
    padding: 10px 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* �ƻ�������ť */
.plan-actions[b-4umqhp7kn1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
    border-top: 1px solid rgba(102, 126, 234, 0.08);
    margin-top: 20px;
}

.plan-actions-left[b-4umqhp7kn1] {
    display: flex;
    align-items: center;
}

.plan-actions-right[b-4umqhp7kn1] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.plan-actions .mud-button[b-4umqhp7kn1] {
    border-radius: 16px;
    font-weight: 600;
    text-transform: none;
    padding: 10px 20px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.plan-actions .mud-button:hover[b-4umqhp7kn1] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.plan-actions .mud-button-filled[b-4umqhp7kn1] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

.plan-actions .mud-button-filled:hover[b-4umqhp7kn1] {
    background: linear-gradient(135deg, #5a6fd8 0%, #6b5b95 100%);
    box-shadow: 0 6px 24px rgba(102, 126, 234, 0.3);
}

.plan-actions .mud-button-outlined[b-4umqhp7kn1] {
    border: 2px solid #667eea;
    color: #667eea;
    background: rgba(102, 126, 234, 0.02);
}

.plan-actions .mud-button-outlined:hover[b-4umqhp7kn1] {
    background: rgba(102, 126, 234, 0.08);
    border-color: #5a6fd8;
}

.plan-actions .mud-button-text[b-4umqhp7kn1] {
    color: #5a6c7d;
    background: rgba(90, 108, 125, 0.04);
}

.plan-actions .mud-button-text:hover[b-4umqhp7kn1] {
    background: rgba(90, 108, 125, 0.08);
    color: #34495e;
}

.disabled-exam-btn[b-4umqhp7kn1] {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.disabled-exam-btn:hover[b-4umqhp7kn1] {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* �Ի�����ʽ */
.plan-detail-content[b-4umqhp7kn1] {
    padding: 12px 0;
}

.plan-detail-title[b-4umqhp7kn1] {
    color: #2c3e50;
    font-weight: 700;
    margin: 0 0 20px 0;
    font-size: 1.5rem;
}

.plan-detail-info[b-4umqhp7kn1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.plan-detail-meta[b-4umqhp7kn1] {
    color: #5a6c7d;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
}

.plan-detail-meta:last-child[b-4umqhp7kn1] {
    border-bottom: none;
}

.plan-description[b-4umqhp7kn1] {
    color: #34495e;
    line-height: 1.7;
    margin: 0;
    padding: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border-radius: 16px;
    border-left: 4px solid #667eea;
    font-size: 15px;
}

.adjust-dialog-content[b-4umqhp7kn1] {
    padding: 12px 0;
}

.adjust-date-picker[b-4umqhp7kn1] {
    width: 100%;
    margin: 20px 0;
}

.adjust-note[b-4umqhp7kn1] {
    color: #f39c12;
    font-style: italic;
    font-size: 13px;
}

/* ��Ӧʽ��� */
@media (max-width: 768px) {
    .my-plans-container[b-4umqhp7kn1] {
        padding: 16px;
    }

    .plans-header[b-4umqhp7kn1] {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 24px;
    }

    .page-title[b-4umqhp7kn1] {
        font-size: 1.5rem;
        text-align: center;
    }

    .discipline-header[b-4umqhp7kn1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px;
    }

    .discipline-title-area[b-4umqhp7kn1] {
        width: 100%;
        justify-content: space-between;
    }

    .discipline-title[b-4umqhp7kn1] {
        font-size: 1.25rem;
    }

    .year-filter[b-4umqhp7kn1],
    .year-select[b-4umqhp7kn1] {
        min-width: auto;
        width: 100%;
        margin-left: 0;
    }

    .subject-tabs[b-4umqhp7kn1] {
        gap: 8px;
        padding: 20px 24px 0;
    }

    .plans-list[b-4umqhp7kn1] {
        padding: 24px;
    }

    .plan-list-header[b-4umqhp7kn1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .plan-info-right[b-4umqhp7kn1] {
        align-self: flex-start;
    }

    .plan-meta-row[b-4umqhp7kn1] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .plan-meta-item[b-4umqhp7kn1] {
        padding: 8px 12px;
    }

    .plan-actions[b-4umqhp7kn1] {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .plan-actions-left[b-4umqhp7kn1] {
        justify-content: center;
    }

    .plan-actions-right[b-4umqhp7kn1] {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }

    .plan-actions .mud-button[b-4umqhp7kn1] {
        width: 100%;
        justify-content: center;
    }

    .plan-item-content[b-4umqhp7kn1] {
        padding: 24px !important;
    }

    .plan-list-item[b-4umqhp7kn1] {
        border-radius: 20px;
    }
}

@media (max-width: 480px) {
    .my-plans-container[b-4umqhp7kn1] {
        padding: 12px;
    }

    .plans-header[b-4umqhp7kn1] {
        padding: 20px;
        border-radius: 16px;
    }

    .page-title[b-4umqhp7kn1] {
        font-size: 1.25rem;
    }

    .discipline-header[b-4umqhp7kn1] {
        padding: 20px;
    }

    .discipline-title[b-4umqhp7kn1] {
        font-size: 1.1rem;
    }

    .plans-list[b-4umqhp7kn1] {
        padding: 20px;
        gap: 16px;
    }

    .subject-tabs[b-4umqhp7kn1] {
        padding: 16px 20px 0;
    }

    .empty-state-paper[b-4umqhp7kn1] {
        padding: 60px 20px;
        border-radius: 16px;
    }

    .plan-title[b-4umqhp7kn1] {
        font-size: 1.1rem;
    }

    .plan-item-content[b-4umqhp7kn1] {
        padding: 20px !important;
    }

    .discipline-section[b-4umqhp7kn1] {
        border-radius: 16px;
    }

    .plan-list-item[b-4umqhp7kn1] {
        border-radius: 16px;
    }

    .plan-meta-item[b-4umqhp7kn1],
    .stage-item[b-4umqhp7kn1] {
        border-radius: 12px;
        padding: 6px 10px;
    }

    .plan-actions .mud-button[b-4umqhp7kn1] {
        border-radius: 12px;
        padding: 8px 16px;
    }
}

/* ��ɫģʽ���� */
@media (prefers-color-scheme: dark) {
    .my-plans-container[b-4umqhp7kn1] {
        background: #2d3748;
    }

    .plans-header[b-4umqhp7kn1],
    .empty-state-paper[b-4umqhp7kn1] {
        background: rgba(45, 55, 72, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .discipline-section[b-4umqhp7kn1] {
        background: rgba(45, 55, 72, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .discipline-header[b-4umqhp7kn1] {
        background: #4a5568;
    }

    .discipline-header:hover[b-4umqhp7kn1] {
        background: #2d3748;
    }

    .discipline-title[b-4umqhp7kn1] {
        color: #e2e8f0;
    }

    .expand-btn[b-4umqhp7kn1] {
        color: #a0aec0 !important;
        background: rgba(255, 255, 255, 0.1);
    }

    .expand-btn:hover[b-4umqhp7kn1] {
        background: rgba(255, 255, 255, 0.2);
    }

    .year-select .mud-input-slot[b-4umqhp7kn1] {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .year-select .mud-input[b-4umqhp7kn1] {
        color: #e2e8f0;
    }

    .subject-tabs[b-4umqhp7kn1] {
        background: linear-gradient(to bottom, rgba(74, 85, 104, 0.8), transparent);
    }

    .subject-chip[b-4umqhp7kn1] {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.2);
        color: #e2e8f0;
    }

    .subject-chip:hover[b-4umqhp7kn1] {
        border-color: #667eea;
        background: rgba(102, 126, 234, 0.2);
        color: #90cdf4;
    }

    .plan-list-item[b-4umqhp7kn1] {
        background: rgba(45, 55, 72, 0.95);
    }

    .plan-list-item:hover[b-4umqhp7kn1] {
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
    }

    .plans-list[b-4umqhp7kn1] {
        background: rgba(26, 32, 44, 0.3);
    }

    .plan-actions[b-4umqhp7kn1] {
        border-color: rgba(255, 255, 255, 0.1);
    }

    .plan-description[b-4umqhp7kn1] {
        background: rgba(102, 126, 234, 0.1);
        color: #e8e8e8;
    }

    .page-title[b-4umqhp7kn1] {
        background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .plan-title[b-4umqhp7kn1] {
        color: #e8e8e8;
    }

    .meta-text[b-4umqhp7kn1],
    .plan-detail-meta[b-4umqhp7kn1] {
        color: #b8b8b8;
    }

    .empty-title[b-4umqhp7kn1],
    .plan-detail-title[b-4umqhp7kn1] {
        color: #e8e8e8;
    }

    .empty-subtitle[b-4umqhp7kn1] {
        color: #888;
    }

    .plan-meta-item[b-4umqhp7kn1] {
        background: rgba(102, 126, 234, 0.15);
    }

    .plan-meta-item:hover[b-4umqhp7kn1] {
        background: rgba(102, 126, 234, 0.25);
    }
}}}
/* /Components/Pages/Profile/Profile.razor.rz.scp.css */
/* 雪域灰背景主题优化 */
[b-0ro9w3qvgi] .mud-container {
    background-color: #f8fafc !important;
}

[b-0ro9w3qvgi] .mud-main-content {
    background-color: #f8fafc !important;
}

body[b-0ro9w3qvgi] {
    background-color: #f8fafc;
}

/* 个人中心优化版样式 - 雪域灰背景设计 */
.profile-container[b-0ro9w3qvgi] {
    padding: 2rem;
    min-height: calc(100vh - 64px);
    background-color: #f8fafc !important; /* 雪域灰背景 - 比之前更浅 */
}

.profile-main-grid[b-0ro9w3qvgi] {
    min-height: calc(100vh - 64px);
    gap: 2rem;
}

/* 左侧边栏样式 - 固定宽度 */
.sidebar-container[b-0ro9w3qvgi] {
    background: transparent;
    min-height: calc(100vh - 128px);
    position: sticky;
    top: 80px;
    overflow-y: auto;
    width: 300px !important; /* 稍微增加宽度 */
    max-width: 300px !important;
    min-width: 300px !important;
    flex: none !important;
}

/* 现代化侧边栏样式 */
.modern-sidebar[b-0ro9w3qvgi] {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 100%;
    width: 100%;
}

/* 个人信息卡片 - 大圆角白色背景 */
.user-info-card[b-0ro9w3qvgi] {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 28px; /* 更大的圆角 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.user-info-card:hover[b-0ro9w3qvgi] {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* 菜单卡片 - 大圆角白色背景 */
.menu-card[b-0ro9w3qvgi] {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 28px; /* 更大的圆角 */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
}

.menu-card:hover[b-0ro9w3qvgi] {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* 用户信息区域 */
.user-info-section[b-0ro9w3qvgi] {
    padding: 2rem 1.5rem;
    text-align: center;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.user-avatar[b-0ro9w3qvgi] {
    border: 4px solid #f1f5f9;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transition: all 0.3s ease;
}

.user-avatar:hover[b-0ro9w3qvgi] {
    transform: scale(1.05);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

.user-name[b-0ro9w3qvgi] {
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    font-size: 1.1rem;
}

.user-id[b-0ro9w3qvgi] {
    color: #64748b;
    margin: 0;
    font-size: 0.85rem;
    opacity: 0.8;
}

/* 菜单分组区域 */
.menu-section[b-0ro9w3qvgi] {
    padding: 1.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.section-header[b-0ro9w3qvgi] {
    color: #334155;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: none;
    letter-spacing: 0.5px;
    margin: 0 0 1rem 0.5rem;
    opacity: 0.9;
}

/* 菜单项列表 */
.menu-list[b-0ro9w3qvgi] {
    gap: 0.375rem;
}

/* 菜单项样式 */
.menu-item[b-0ro9w3qvgi] {
    justify-content: flex-start;
    text-transform: none;
    border-radius: 16px; /* 增大圆角 */
    padding: 1rem 1.25rem;
    margin: 0.25rem 0;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    min-height: 48px;
    width: 100%;
}

.menu-item:hover[b-0ro9w3qvgi] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(99, 102, 241, 0.06) 100%);
    color: #3b82f6;
    transform: translateX(4px);
}

.menu-item.active[b-0ro9w3qvgi] {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: white;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
    transform: translateX(8px);
}

.menu-item.active:hover[b-0ro9w3qvgi] {
    background: linear-gradient(135deg, #2563eb 0%, #5b21b6 100%);
    color: white;
}

/* 图标样式 */
.menu-item .mud-button-start-icon[b-0ro9w3qvgi] {
    margin-right: 1rem;
    font-size: 1.2rem;
}

.menu-item.active .mud-button-start-icon[b-0ro9w3qvgi] {
    color: white;
}

/* 右侧内容区域样式 */
.content-container[b-0ro9w3qvgi] {
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.carousel-section[b-0ro9w3qvgi] {
    background: white;
    border-radius: 32px; /* 更大的圆角 */
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    backdrop-filter: blur(10px);
}

.carousel-section:hover[b-0ro9w3qvgi] {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    transform: translateY(-6px);
}

.content-section[b-0ro9w3qvgi] {
    background: white;
    border-radius: 32px; /* 更大的圆角 */
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.03);
    padding: 2.5rem;
    flex: 1;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.content-section:hover[b-0ro9w3qvgi] {
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* 轮播图样式 */
.profile-carousel[b-0ro9w3qvgi] {
    border-radius: 24px;
    overflow: hidden;
}

.carousel-card[b-0ro9w3qvgi] {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

.carousel-content[b-0ro9w3qvgi] {
    padding: 2.5rem;
    height: 100%;
    display: flex;
    align-items: center;
}

.carousel-title[b-0ro9w3qvgi] {
    color: white;
    font-weight: 700;
    margin: 0;
}

.carousel-description[b-0ro9w3qvgi] {
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

.carousel-button[b-0ro9w3qvgi] {
    color: #1e293b !important;
    background: white !important;
    font-weight: 600;
    border-radius: 16px; /* 增大圆角 */
    text-transform: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.carousel-button:hover[b-0ro9w3qvgi] {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.carousel-icon[b-0ro9w3qvgi] {
    color: rgba(255, 255, 255, 0.8);
    font-size: 4rem;
}

/* 学习统计卡片样式 */
.learning-stats-card[b-0ro9w3qvgi],
.my-courses-card[b-0ro9w3qvgi],
.my-orders-card[b-0ro9w3qvgi],
.module-card[b-0ro9w3qvgi] {
    border: 1px solid rgba(0, 0, 0, 0.03);
    border-radius: 28px; /* 更大的圆角 */
    box-shadow: none;
    overflow: hidden;
    background: white;
}

.stat-card[b-0ro9w3qvgi] {
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 24px; /* 更大的圆角 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    background: white;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.stat-card:hover[b-0ro9w3qvgi] {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
    transform: translateY(-8px);
}

.stat-number[b-0ro9w3qvgi] {
    font-weight: 700;
    margin: 0;
}

.chart-card[b-0ro9w3qvgi],
.achievement-card[b-0ro9w3qvgi],
.goal-card[b-0ro9w3qvgi] {
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 20px; /* 适中的圆角 */
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.chart-card:hover[b-0ro9w3qvgi],
.achievement-card:hover[b-0ro9w3qvgi],
.goal-card:hover[b-0ro9w3qvgi] {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.achievement-item[b-0ro9w3qvgi] {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
}

.chart-placeholder[b-0ro9w3qvgi] {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 课程卡片样式 */
.course-card[b-0ro9w3qvgi] {
    border-radius: 24px; /* 更大的圆角 */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    background: white;
    backdrop-filter: blur(10px);
}

.course-card:hover[b-0ro9w3qvgi] {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
    transform: translateY(-8px);
}

.course-title[b-0ro9w3qvgi] {
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    line-height: 1.4;
}

.course-instructor[b-0ro9w3qvgi] {
    margin: 0.5rem 0;
}

.progress-section[b-0ro9w3qvgi] {
    margin-top: 1rem;
}

/* 移动端底部导航优化 */
.mobile-bottom-nav[b-0ro9w3qvgi] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    z-index: 1000;
    padding: 0.5rem;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.08);
    backdrop-filter: blur(20px);
}

.nav-label[b-0ro9w3qvgi] {
    color: #64748b;
    font-size: 0.7rem;
    text-align: center;
    margin: 0;
    line-height: 1;
}

/* 搜索框样式 */
.search-field[b-0ro9w3qvgi] {
    min-width: 250px;
}

/* 空状态样式 */
.empty-state[b-0ro9w3qvgi] {
    border-radius: 20px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid rgba(14, 165, 233, 0.2);
    backdrop-filter: blur(10px);
}

/* 响应式设计 */
@media (max-width: 768px) {
    .profile-container[b-0ro9w3qvgi] {
        padding: 1rem;
        background-color: #f8fafc !important;
    }
    
    .profile-main-grid[b-0ro9w3qvgi] {
        gap: 1.5rem;
    }
    
    .sidebar-container[b-0ro9w3qvgi] {
        position: static;
        min-height: auto;
        margin-bottom: 64px;
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
    }
    
    .content-container[b-0ro9w3qvgi] {
        gap: 1.5rem;
        margin-bottom: 80px;
    }
    
    .carousel-content[b-0ro9w3qvgi] {
        padding: 1.5rem;
    }
    
    .content-section[b-0ro9w3qvgi] {
        padding: 1.5rem;
        border-radius: 24px; /* 移动端稍小的圆角 */
    }
    
    .user-info-card[b-0ro9w3qvgi],
    .menu-card[b-0ro9w3qvgi] {
        border-radius: 20px; /* 移动端稍小的圆角 */
    }
    
    .user-info-section[b-0ro9w3qvgi] {
        padding: 1.5rem;
    }
    
    .menu-section[b-0ro9w3qvgi] {
        padding: 1rem;
    }
    
    .sidebar-avatar[b-0ro9w3qvgi] {
        width: 60px !important;
        height: 60px !important;
    }
    
    .search-field[b-0ro9w3qvgi] {
        min-width: 200px;
    }
    
    .menu-item[b-0ro9w3qvgi] {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        border-radius: 12px;
    }
    
    .section-header[b-0ro9w3qvgi] {
        font-size: 0.8rem;
    }
    
    /* 隐藏大屏导航 */
    .sidebar-card .sidebar-section[b-0ro9w3qvgi] {
        display: none;
    }
    
    .sidebar-card .user-info-section[b-0ro9w3qvgi] {
        display: flex;
    }
}

@media (max-width: 480px) {
    .profile-container[b-0ro9w3qvgi] {
        padding: 0.75rem;
    }
    
    .profile-main-grid[b-0ro9w3qvgi] {
        gap: 1rem;
    }
    
    .carousel-content[b-0ro9w3qvgi] {
        padding: 1rem;
    }
    
    .content-section[b-0ro9w3qvgi] {
        padding: 1rem;
        border-radius: 20px;
    }
    
    .user-info-card[b-0ro9w3qvgi],
    .menu-card[b-0ro9w3qvgi] {
        border-radius: 16px;
    }
    
    .carousel-title[b-0ro9w3qvgi] {
        font-size: 1.25rem;
    }
    
    .carousel-description[b-0ro9w3qvgi] {
        font-size: 0.875rem;
    }
    
    .search-field[b-0ro9w3qvgi] {
        min-width: 150px;
        font-size: 0.875rem;
    }
    
    .user-info-section[b-0ro9w3qvgi],
    .menu-section[b-0ro9w3qvgi] {
        padding: 0.75rem;
    }
    
    .sidebar-avatar[b-0ro9w3qvgi] {
        width: 50px !important;
        height: 50px !important;
    }
    
    .user-name[b-0ro9w3qvgi] {
        font-size: 0.875rem;
    }
}

/* 动画效果 */
@keyframes fadeInUp-b-0ro9w3qvgi {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft-b-0ro9w3qvgi {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.content-section[b-0ro9w3qvgi] {
    animation: fadeInUp-b-0ro9w3qvgi 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.user-info-card[b-0ro9w3qvgi] {
    animation: slideInLeft-b-0ro9w3qvgi 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.menu-card[b-0ro9w3qvgi] {
    animation: slideInLeft-b-0ro9w3qvgi 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stat-card[b-0ro9w3qvgi] {
    animation: fadeInUp-b-0ro9w3qvgi 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.stat-card:nth-child(2)[b-0ro9w3qvgi] {
    animation-delay: 0.1s;
}

.stat-card:nth-child(3)[b-0ro9w3qvgi] {
    animation-delay: 0.2s;
}

.stat-card:nth-child(4)[b-0ro9w3qvgi] {
    animation-delay: 0.3s;
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .profile-container[b-0ro9w3qvgi] {
        background: #0f172a !important;
    }
    
    [b-0ro9w3qvgi] .mud-container {
        background-color: #0f172a !important;
    }
    
    [b-0ro9w3qvgi] .mud-main-content {
        background-color: #0f172a !important;
    }
    
    .user-info-card[b-0ro9w3qvgi],
    .menu-card[b-0ro9w3qvgi],
    .carousel-section[b-0ro9w3qvgi],
    .content-section[b-0ro9w3qvgi],
    .learning-stats-card[b-0ro9w3qvgi],
    .my-courses-card[b-0ro9w3qvgi],
    .my-orders-card[b-0ro9w3qvgi],
    .module-card[b-0ro9w3qvgi] {
        background: rgba(30, 41, 59, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
        color: #f1f5f9;
        backdrop-filter: blur(20px);
    }
    
    .user-info-section[b-0ro9w3qvgi],
    .menu-section[b-0ro9w3qvgi] {
        background: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.8) 100%);
    }
    
    .user-name[b-0ro9w3qvgi] {
        color: #f1f5f9;
    }
    
    .section-header[b-0ro9w3qvgi] {
        color: #f1f5f9;
    }
    
    .menu-item[b-0ro9w3qvgi] {
        color: #94a3b8;
    }
    
    .menu-item:hover[b-0ro9w3qvgi] {
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.15) 0%, rgba(99, 102, 241, 0.12) 100%);
        color: #60a5fa;
    }
    
    .stat-card[b-0ro9w3qvgi],
    .course-card[b-0ro9w3qvgi],
    .chart-card[b-0ro9w3qvgi],
    .achievement-card[b-0ro9w3qvgi],
    .goal-card[b-0ro9w3qvgi] {
        background: rgba(51, 65, 85, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
        color: #f1f5f9;
        backdrop-filter: blur(20px);
    }
    
    .empty-state[b-0ro9w3qvgi] {
        background: linear-gradient(135deg, rgba(30, 64, 175, 0.3) 0%, rgba(30, 58, 138, 0.3) 100%);
        border-color: rgba(59, 130, 246, 0.3);
        color: #dbeafe;
        backdrop-filter: blur(10px);
    }
    
    .mobile-bottom-nav[b-0ro9w3qvgi] {
        background: rgba(30, 41, 59, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
    }
}

/* 滚动条样式 */
.profile-container [b-0ro9w3qvgi]::-webkit-scrollbar {
    width: 8px;
}

.profile-container [b-0ro9w3qvgi]::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 4px;
}

.profile-container [b-0ro9w3qvgi]::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.2));
    border-radius: 4px;
}

.profile-container [b-0ro9w3qvgi]::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.3));
}

/* 毛玻璃效果 */
.glass-effect[b-0ro9w3qvgi] {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* 微妙的阴影渐变 */
.shadow-gradient[b-0ro9w3qvgi] {
    box-shadow: 
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 4px 12px rgba(0, 0, 0, 0.04),
        0 16px 32px rgba(0, 0, 0, 0.03);
}
/* /Components/Pages/QuestionBank/ExamPractice.razor.rz.scp.css */
/* Reset potential layout spacing causing top blank */
html[b-bhb550xv5b], body[b-bhb550xv5b] {
    margin: 0;
    padding: 0;
}

/* Remove MudBlazor default spacing */
main.mud-main-content[b-bhb550xv5b] {
    padding: 0 !important;
    margin: 0 !important;
}
/* AI评分加载动画样式 */
    .ai-scoring-overlay[b-bhb550xv5b] {
        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: 9999;
        backdrop-filter: blur(4px);
        animation: fadeIn-b-bhb550xv5b 0.3s ease-out;
    }

    .ai-scoring-modal[b-bhb550xv5b] {
        background: white;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        animation: slideUp-b-bhb550xv5b 0.4s ease-out;
    }

    .ai-scoring-content[b-bhb550xv5b] {
        padding: 50px 70px;
        text-align: center;
    }

    /* AI大脑动画 */
    .ai-brain-animation[b-bhb550xv5b] {
        position: relative;
        width: 100px;
        height: 100px;
        margin: 0 auto 30px;
    }

    .brain-core[b-bhb550xv5b] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 50%;
        animation: pulse-b-bhb550xv5b 2s ease-in-out infinite;
    }

    .brain-wave[b-bhb550xv5b] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 2px solid #667eea;
        border-radius: 50%;
        opacity: 0;
    }

    .wave-1[b-bhb550xv5b] {
        animation: wave-b-bhb550xv5b 2s ease-out infinite;
    }

    .wave-2[b-bhb550xv5b] {
        animation: wave-b-bhb550xv5b 2s ease-out 0.5s infinite;
    }

    .wave-3[b-bhb550xv5b] {
        animation: wave-b-bhb550xv5b 2s ease-out 1s infinite;
    }

    @keyframes pulse-b-bhb550xv5b {
        0%, 100% {
            transform: translate(-50%, -50%) scale(1);
            box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
        }
        50% {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 0 40px rgba(102, 126, 234, 0.8);
        }
    }

    @keyframes wave-b-bhb550xv5b {
        0% {
            width: 40px;
            height: 40px;
            opacity: 1;
        }
        100% {
            width: 100px;
            height: 100px;
            opacity: 0;
        }
    }

    /* 标题和副标题 */
    .scoring-title[b-bhb550xv5b] {
        font-size: 24px;
        font-weight: 600;
        margin: 0 0 10px 0;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .scoring-subtitle[b-bhb550xv5b] {
        font-size: 14px;
        color: #666;
        margin: 0 0 25px 0;
    }

    /* 跳动的点 */
    .progress-dots[b-bhb550xv5b] {
        display: flex;
        gap: 8px;
        justify-content: center;
    }

    .dot[b-bhb550xv5b] {
        width: 8px;
        height: 8px;
        background: #667eea;
        border-radius: 50%;
        animation: bounce-b-bhb550xv5b 1.4s ease-in-out infinite;
    }

    .dot:nth-child(1)[b-bhb550xv5b] {
        animation-delay: 0s;
    }

    .dot:nth-child(2)[b-bhb550xv5b] {
        animation-delay: 0.2s;
    }

    .dot:nth-child(3)[b-bhb550xv5b] {
        animation-delay: 0.4s;
    }

    @keyframes bounce-b-bhb550xv5b {
        0%, 80%, 100% {
            transform: scale(0);
            opacity: 0.5;
        }
        40% {
            transform: scale(1);
            opacity: 1;
        }
    }

    /* 入场动画 */
    @keyframes fadeIn-b-bhb550xv5b {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes slideUp-b-bhb550xv5b {
        from {
            transform: translateY(30px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }
.mud-layout[b-bhb550xv5b] {
    min-height: auto !important;
}

.mud-main-content[b-bhb550xv5b] {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* === SKELETON SCREENS === */
.skeleton-container[b-bhb550xv5b] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ddebf6;
    font-size: 14px;
    color: #222;
    position: relative;
    background: #6eb0e9 url('/img/pic_02.png') repeat-x top center;
    margin: 0;
    padding: 0;
}

.skeleton-header[b-bhb550xv5b] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    padding: 0 30px 0 10px;
    gap: 20px;
    color: #fff;
    height: 101px;
    box-sizing: border-box;
}

.skeleton-header-left[b-bhb550xv5b] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding-top: 3px;
}

.skeleton-avatar[b-bhb550xv5b] {
    width: 86px;
    height: 98px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border: 1px solid #ffffff;
    flex-shrink: 0;
}

.skeleton-user-info[b-bhb550xv5b] {
    margin-left: 10px;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 8px;
}

.skeleton-user-line[b-bhb550xv5b] {
    height: 18px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 4px;
}

.skeleton-user-line:nth-child(1)[b-bhb550xv5b] { width: 80px; }
.skeleton-user-line:nth-child(2)[b-bhb550xv5b] { width: 60px; }
.skeleton-user-line:nth-child(3)[b-bhb550xv5b] { width: 120px; }
.skeleton-user-line:nth-child(4)[b-bhb550xv5b] { width: 140px; }

.skeleton-title-wrapper[b-bhb550xv5b] {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skeleton-title[b-bhb550xv5b] {
    height: 24px;
    width: 400px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-subtitle[b-bhb550xv5b] {
    height: 20px;
    width: 320px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 4px;
}

.skeleton-actions[b-bhb550xv5b] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    height: 100%;
    gap: 8px;
    padding-top: 15px;
}

.skeleton-time[b-bhb550xv5b] {
    height: 20px;
    width: 150px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 4px;
}

.skeleton-submit-btn[b-bhb550xv5b] {
    width: 81px;
    height: 31px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 2px;
}

.skeleton-body[b-bhb550xv5b] {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding-bottom: 28px;
    box-sizing: border-box;
}

.skeleton-question-list[b-bhb550xv5b] {
    width: 300px;
    background-color: #eff6fe;
    border: 1px solid #9fb7f7;
    border-top: none;
    border-right: none;
    overflow: hidden;
    padding: 8px;
}

.skeleton-section[b-bhb550xv5b] {
    margin-bottom: 16px;
}

.skeleton-section-header[b-bhb550xv5b] {
    height: 32px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-question-links[b-bhb550xv5b] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
}

.skeleton-question-link[b-bhb550xv5b] {
    width: 28px;
    height: 28px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 2px;
    margin: 1px;
}

.skeleton-middlebar[b-bhb550xv5b] {
    width: 20px;
    background: #ddebf6;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-shrink: 0;
    position: relative;
    border-left: 1px solid #9fb7f7;
    margin-left: -1px;
}

.skeleton-middlebar[b-bhb550xv5b]::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 1px solid #9fb7f7;
}

.skeleton-toggle-btn[b-bhb550xv5b] {
    width: 9px;
    height: 61px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border: none;
}

.skeleton-question-display[b-bhb550xv5b] {
    flex: 1;
    padding: 12px 20px 40px;
    background: #ddebf6;
    display: flex;
    flex-direction: column;
}

.skeleton-paper-label-area[b-bhb550xv5b] {
    background: url(../img/n_42.gif) repeat-x;
    width: 100%;
    height: 29px;
    margin-bottom: 8px;
}

.skeleton-paper-label[b-bhb550xv5b] {
    height: 29px;
    width: 109px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 4px;
}

.skeleton-instruction[b-bhb550xv5b] {
    height: 20px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 12px;
}

.skeleton-content[b-bhb550xv5b] {
    border-top: 1px solid #9fb7f7;
    padding: 15px;
    margin: 0;
}

.skeleton-question-title[b-bhb550xv5b] {
    height: 24px;
    width: 120px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 16px;
}

.skeleton-question-stem[b-bhb550xv5b] {
    height: 60px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 16px;
}

.skeleton-options[b-bhb550xv5b] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.skeleton-option[b-bhb550xv5b] {
    height: 50px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 8px;
}

.skeleton-footer[b-bhb550xv5b] {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 28px;
    background: #ddebf6;
    border-top: 1px solid #b2c8d9;
    display: flex;
    align-items: center;
    z-index: 50;
}

.skeleton-footer-actions[b-bhb550xv5b] {
    margin-left: 320px;
    display: flex;
    gap: 12px;
}

.skeleton-footer-btn[b-bhb550xv5b] {
    height: 24px;
    width: 60px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer-b-bhb550xv5b 1.5s infinite;
    border-radius: 3px;
}

@keyframes shimmer-b-bhb550xv5b {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* Loading spinner alternative */
.loading-spinner[b-bhb550xv5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 16px;
    color: #666;
    flex-direction: column;
    gap: 20px;
}

.spinner[b-bhb550xv5b] {
    width: 40px;
    height: 40px;
    border: 4px solid #e0e0e0;
    border-top: 4px solid #488fc5;
    border-radius: 50%;
    animation: spin-b-bhb550xv5b 1s linear infinite;
}

@keyframes spin-b-bhb550xv5b {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* === END SKELETON SCREENS === */

/* Container */
.exam-container[b-bhb550xv5b] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ddebf6;
    font-size: 14px;
    color: #222;
    position: relative;
    background: #6eb0e9 url('/img/pic_02.png') repeat-x top center;
    margin: 0;
    padding: 0;
}

/* Header */
.exam-header[b-bhb550xv5b] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    padding: 0 30px 0 10px;
    gap: 20px;
    color: #fff;
    height: 101px;
    box-sizing: border-box;
}

/* Left section: Avatar + User Info */
.header-left[b-bhb550xv5b] {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding-top: 3px;
}

.user-avatar[b-bhb550xv5b] {
    flex-shrink: 0;
}

.exam-header .user-avatar img[b-bhb550xv5b] {
    width: 86px;
    height: 98px;
    object-fit: cover;
    background: #fff;
    border: 1px solid #ffffff;
    display: block;
}

.exam-header .user-info[b-bhb550xv5b] {
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
    text-shadow: 0 1px 1px rgba(0,0,0,.25);
    margin-left: 10px;
    padding-left: 0;
}

/* Center section: Title */
.exam-title-wrapper[b-bhb550xv5b] {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.exam-title[b-bhb550xv5b] {
    margin: 0;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
    font-size: 16px;
    font-weight: bold;
    line-height: 25px;
}

/* Right section: Actions */
.exam-actions[b-bhb550xv5b] {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-end;
    height: 100%;
    gap: 5px;
}

    .exam-actions .time-remaining[b-bhb550xv5b] {
        margin-top: 15px;
        font-size: 16px;
        font-weight: bolder;
        color: #ffff00;
        line-height: 29px;
    }

    .exam-actions .submit-btn[b-bhb550xv5b] {
        margin-top: 15px;
        width: 81px;
        height: 31px;
        background: url('../img/submit.gif') repeat-x;
        border: 1px solid #cc6600;
        color: #000000;
        line-height: 29px;
        font-size: 13px;
        cursor: pointer;
        font-weight: normal;
        box-shadow: none;
        border-radius: 2px;
        padding: 0;
    }

        .exam-actions .submit-btn:hover[b-bhb550xv5b] {
            filter: brightness(1.05);
        }

/* Body */
.exam-body[b-bhb550xv5b] {
    flex: 1;
    display: flex;
    overflow: hidden;
    padding-bottom: 28px;
    box-sizing: border-box;
}

/* Question list */
.question-list-wrapper[b-bhb550xv5b] {
    width: 300px;
    background-color: #eff6fe;
    border: 1px solid #9fb7f7;
    border-top: none;
    border-right: none; /* �Ƴ��ұ߿�����middlebar���� */
    overflow: hidden;
    transition: width 0.3s ease;
}

.question-list-wrapper.collapsed[b-bhb550xv5b] {
    width: 0;
}

.question-list-inner[b-bhb550xv5b] {
    width: 300px;
    height: 100%;
    overflow: auto;
}

/* Middle bar for collapse/expand toggle - 20px width area */
.middlebar[b-bhb550xv5b] {
    width: 20px;
    background: #ddebf6;
    display: flex;
    align-items: center;
    justify-content: left;
    flex-shrink: 0;
    position: relative;
    border-left: 1px solid #9fb7f7; /* �����߿����������˵� */
    margin-left: -1px; /* �����ƶ�1px��ʹ�����������߿� */
}

/* ��middlebar�Ҳ�3px�����Ӵ�ֱ�� */
.middlebar[b-bhb550xv5b]::after {
    content: '';
    position: absolute;
    right: 3px;
    top: 0;
    bottom: 0;
    width: 1px;
    border-left: 1px solid #9fb7f7;
}

.middlebar input[b-bhb550xv5b] {
    width: 9px;
    height: 61px;
    border: none;
    cursor: pointer;
    background: url(../img/bar2.gif) no-repeat;
    transition: transform 0.3s ease;
}

/* Rotate arrow when collapsed */
.exam-container.list-collapsed .middlebar input[b-bhb550xv5b] {
    transform: rotate(180deg);
}

/* Sections */
.ql-section[b-bhb550xv5b] {

}

/* Section header with centered text */
.ql-section-header[b-bhb550xv5b] {
    background: url(../img/left_menu_bg.gif) repeat-x;
    color: #000000;
    font-size: 14px;
    width: 100%;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    box-sizing: border-box;
    cursor: pointer;
    user-select: none;
}

.ql-section-title[b-bhb550xv5b] {
    color: #000000;
    font-size: 14px;
    font-weight: bolder;
    text-align: center;
    flex: 1;
}

.ql-section-tools[b-bhb550xv5b] {
    color: #000000;
    font-size: 12px;
    cursor: pointer;
    flex-shrink: 0;
}

.ql-section-body[b-bhb550xv5b] {
    padding: 8px;
    line-height: 1.8;
}

.ql-section-body.hidden[b-bhb550xv5b] {
    display: none;
}

/* Question link list - official design style */
.question-link-list[b-bhb550xv5b] {
    font-size: 14px;
    line-height: 1.8;
    word-wrap: break-word;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 4px;
}

/* Official design: block style question links with underline and status indicator */
.question-link[b-bhb550xv5b] {
    display: block;
    width: 28px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    font-size: 14px;
    font-family: "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53";
    font-weight: normal;
    border: 1px solid #FFF;
    background-color: #ddebf6;
    float: left;
    position: relative;
    margin: 1px;
    padding: 2px;
    box-sizing: border-box;
    cursor: pointer;
    text-decoration: none;
}

/* Question number with underline - centered and blue */
.question-link[b-bhb550xv5b]::before {
    content: attr(data-question-number);
    display: block;
    text-align: center;
    line-height: 14px;
    text-decoration: underline;
    font-size: 12px;
    color: #0066cc; /* ��ɫ */
    margin-top: 2px;
}

/* Status indicator positioned in top right - red */
.question-link[b-bhb550xv5b]::after {
    content: attr(data-status);
    position: absolute;
    top: 1px;
    right: 1px;
    font-size: 10px;
    color: #ff0000; /* ��ɫ */
    font-weight: bold;
    line-height: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8px;
    height: 8px;
}

/* ֻ����û�д���ʱ��ʾ* */
.question-link[data-has-answer="false"][b-bhb550xv5b]::after {
    content: "*";
}

/* �д���ʱ����ʾ״̬���ţ������Ǳ��� */
.question-link[data-has-answer="true"]:not(.marked)[b-bhb550xv5b]::after {
    content: "";
}

/* ����״̬ */
.question-link.marked[b-bhb550xv5b]::after {
    content: "?";
}

.question-link:hover[b-bhb550xv5b] {
    background-color: #c4d6e4;
}

/* Active state - no UI effects, same as normal state */
.question-link.active[b-bhb550xv5b] {
    /* No special styling - same as normal state */
}

/* Hide the inner content since we use pseudo-elements */
.question-link .question-number[b-bhb550xv5b] {
    display: none;
}

/* Hide old inline indicators */
.question-link .answer-indicator[b-bhb550xv5b],
.question-link .mark-indicator[b-bhb550xv5b] {
    display: none;
}

.answer-indicator[b-bhb550xv5b] {
    color: #ff0000;
    font-size: 12px;
    margin-left: 1px;
    margin-right: 2px;
}

.mark-indicator[b-bhb550xv5b] {
    color: #ff0000;
    font-size: 12px;
    margin-left: 1px;
    margin-right: 2px;
}

.separator[b-bhb550xv5b] {
    color: #0066cc;
    margin: 0 2px;
}

/* Remove old question number list styles */
.question-number-list[b-bhb550xv5b] {
    display: none;
}

.qn-item[b-bhb550xv5b] {
    display: none;
}

/* Extra tips */
.ql-extra[b-bhb550xv5b] {
    margin: 8px;
    padding: 8px;
    color: #c00;
    font-size: 12px;
}

.calc-btn[b-bhb550xv5b] {
    width: 64px;
    height: 64px;
    background: url('/img/calculator.png') no-repeat center center;
    background-size: contain;
    border: none;
    cursor: pointer;
    display: block;
    margin: 8px auto;
    text-indent: -9999px;
    overflow: hidden;
}

    .calc-btn:focus[b-bhb550xv5b] {
        outline: 2px solid #488fc5;
    }

/* Question display */
.question-display[b-bhb550xv5b] {
    flex: 1;
    padding: 12px 20px 40px;
    overflow: auto;
    background: #ddebf6;
    display: flex;
    flex-direction: column;
    font-weight: normal;
    color: #333333;
    font-size: 18px;
    line-height: 1.5;
    text-align: left;
}

/* Paper label area with background pattern */
.paper-label-area[b-bhb550xv5b] {
    background: url(../img/n_42.gif) repeat-x;
    width: 100%;
    height: 29px;
    margin-bottom: 8px;
}

.paper-label[b-bhb550xv5b] {
    float: left;
    height: 29px;
    margin-right: 6px;
    width: 109px;
    font-size: 14px;
    font-weight: bolder;
    line-height: 29px;
    background: url(../img/markst.png) no-repeat;
    text-align: center;
    font-family: "\5FAE\8F6F\96C5\9ED1", "\5B8B\4F53";
    color: #000;
}

.question-instruction[b-bhb550xv5b] {
    padding: 10px 14px;
    margin-bottom: 12px;
    border-radius: 4px;
}

.question-content[b-bhb550xv5b] {
    border-top: 1px solid #9fb7f7;
    line-height: 1.5;
    border-top: 1px solid #9fb7f7;
    padding: 15px 15px 40px 15px;
    margin: 0px;
}

.question-title[b-bhb550xv5b] {
    margin: 0 0 10px;
    font-weight:bold;
    font-size:16px;
}

.question-stem[b-bhb550xv5b] {
    margin-bottom: 12px;
    line-height: 1.5;
}

.options-list[b-bhb550xv5b] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .options-list li[b-bhb550xv5b] {
        padding: 6px 10px;
    }

        .options-list li:hover[b-bhb550xv5b] {
        }

.question-analysis[b-bhb550xv5b] {
    margin-top: 16px;
    padding: 10px 12px;
    background: #fff8e1;
    border-left: 4px solid #f6aa00;
}

/* Footer (sticky) */
.exam-footer[b-bhb550xv5b] {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 28px;
    background: #ddebf6;
    border-top: 1px solid #b2c8d9;
    display: flex;
    align-items: center;
    z-index: 50;
}

.footer-actions[b-bhb550xv5b] {
    margin-left: 320px; /* 300px (menu) + 20px (middlebar) */
    display: flex;
    gap: 12px;
    transition: margin-left 0.3s ease;
}

.exam-container.list-collapsed .footer-actions[b-bhb550xv5b] {
    margin-left: 20px; /* Only middlebar width */
}

.footer-actions button[b-bhb550xv5b] {
    background: linear-gradient(#d8e6f1,#b5d0e2);
    border: 1px solid #7da5c0;
    padding: 4px 14px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

    .footer-actions button:disabled[b-bhb550xv5b] {
        opacity: .5;
        cursor: default;
    }

.mark-btn[b-bhb550xv5b] {
    background: linear-gradient(#ffe2c2,#ffb25f);
    border-color: #e1922e;
}

/* Scrollbars refine */
.question-list-inner[b-bhb550xv5b]::-webkit-scrollbar, .question-display[b-bhb550xv5b]::-webkit-scrollbar {
    width: 8px;
}

.question-list-inner[b-bhb550xv5b]::-webkit-scrollbar-thumb, .question-display[b-bhb550xv5b]::-webkit-scrollbar-thumb {
    background: #91caf6;
    border-radius: 4px;
}

@media (max-width:1200px) {
    .exam-header[b-bhb550xv5b] {
        grid-template-columns: auto 1fr auto;
        padding: 0 20px 0 10px;
    }

    .question-list-wrapper[b-bhb550xv5b] {
        width: 220px;
    }

    .question-list-inner[b-bhb550xv5b] {
        width: 220px;
    }

    .footer-actions[b-bhb550xv5b] {
        margin-left: 240px; /* 220px + 20px */
    }

    .exam-container.list-collapsed .footer-actions[b-bhb550xv5b] {
        margin-left: 20px;
    }
}

/* ��ԭ��CSS�����������¹�����ʽ */

/* ��������ʽ */
.text-answer-area[b-bhb550xv5b] {
    margin: 15px 0;
}

.text-answer-input[b-bhb550xv5b] {
    width: 100%;
    min-height: 120px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    font-family: inherit;
}

.text-answer-input:disabled[b-bhb550xv5b] {
    background-color: #f5f5f5;
    color: #666;
}

.text-answer-actions[b-bhb550xv5b] {
    margin-top: 10px;
    text-align: right;
}

.submit-text-btn[b-bhb550xv5b] {
    background: linear-gradient(#d8e6f1, #b5d0e2);
    border: 1px solid #7da5c0;
    padding: 8px 20px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.submit-text-btn:disabled[b-bhb550xv5b] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ѡ������ǿ��ʽ */
.options-list li label[b-bhb550xv5b] {
    display: flex;
    align-items: center; /* ��ֱ���ж��� */
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.2s;
    border: 1px solid transparent;
    min-height: 40px; /* ȷ�����㹻�ĸ߶� */
}

.options-list li label:hover[b-bhb550xv5b] {
    background-color: #f0f7ff;
}

/* ��ʾ����ʱ����hoverЧ����cursor */
.options-list li label.option-disabled[b-bhb550xv5b] {
    cursor: default;
}

.options-list li label.option-disabled:hover[b-bhb550xv5b] {
    background-color: inherit;
}

.options-list li label.correct[b-bhb550xv5b] {
    background-color: #e4f9f4;
    border-color: #00c492;
}

.options-list li label.incorrect[b-bhb550xv5b] {
    background-color: #feeeef;
    border-color: #f4454c;
}

/* ��������ʽ�Ż� */
.options-list li label input[type="radio"][b-bhb550xv5b],
.options-list li label input[type="checkbox"][b-bhb550xv5b] {
    margin: 0;
    margin-right: 8px;
    flex-shrink: 0; /* ��ֹѹ�� */
    align-self: center; /* ���ж��� */
    width: 16px;
    height: 16px;
}

/* ����״̬�������� */
.options-list li label input[type="radio"]:disabled[b-bhb550xv5b],
.options-list li label input[type="checkbox"]:disabled[b-bhb550xv5b] {
    cursor: default;
}

.option-indicator[b-bhb550xv5b] {
    margin-right: 8px;
    min-width: 20px;
    text-align: center;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.correct-icon[b-bhb550xv5b] {
    color: #00c492;
    font-size: 16px;
}

.error-icon[b-bhb550xv5b] {
    color: #f4454c;
    font-size: 16px;
}

.option-label[b-bhb550xv5b] {
    color: #666;
    font-weight: normal;
}

.option-text[b-bhb550xv5b] {
    flex: 1;
    line-height: 1.5;
    display: flex;
    align-items: center; /* ȷ���ı�Ҳ��ֱ���� */
    word-wrap: break-word;
    word-break: break-word;
}

/* ȷ�ϰ�ť��ʽ */
.confirm-area[b-bhb550xv5b] {
    margin: 15px 0;
    text-align: center;
}

.confirm-btn[b-bhb550xv5b] {
    background: linear-gradient(#d8e6f1, #b5d0e2);
    border: 1px solid #7da5c0;
    padding: 8px 24px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 14px;
}

.confirm-btn:disabled[b-bhb550xv5b] {
    opacity: 0.5;
    cursor: not-allowed;
}

/* �𰸷������� */
.answer-analysis-area[b-bhb550xv5b] {
    margin: 20px 0;
    padding: 15px;
    background: #f8fafb;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
}

.answer-info[b-bhb550xv5b] {
    margin-bottom: 15px;
}

.answer-row[b-bhb550xv5b] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    flex-wrap: wrap;
}

.answer-label[b-bhb550xv5b] {
    font-weight: bold;
    color: #333;
}

.answer-value[b-bhb550xv5b] {
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
}

.answer-value.correct[b-bhb550xv5b] {
    color: #00c492;
    background-color: #e4f9f4;
}

.answer-value.incorrect[b-bhb550xv5b] {
    color: #f4454c;
    background-color: #feeeef;
}

/* ����ͳ�� */
.answer-stats[b-bhb550xv5b] {
    display: flex;
    justify-content: space-around;
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 6px;
    padding: 15px;
}

.stat-item[b-bhb550xv5b] {
    text-align: center;
}

.stat-value[b-bhb550xv5b] {
    font-size: 16px;
    font-weight: bold;
    color: #333;
    margin-bottom: 4px;
}

.stat-label[b-bhb550xv5b] {
    font-size: 12px;
    color: #666;
}

/* ����������չʾ */
.text-answer-result[b-bhb550xv5b] {
    margin: 20px 0;
}

.score-card[b-bhb550xv5b] {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

.score-row[b-bhb550xv5b] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.score-item[b-bhb550xv5b] {
    text-align: center;
}

.score-item.highlight .score-value[b-bhb550xv5b] {
    color: #2196F3;
    font-size: 18px;
}

.score-label[b-bhb550xv5b] {
    font-size: 12px;
    color: #666;
}

.score-value[b-bhb550xv5b] {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.ai-review[b-bhb550xv5b] {
    border-top: 1px solid #e1e8ed;
    padding-top: 15px;
}

.ai-review-title[b-bhb550xv5b] {
    font-weight: bold;
    margin-bottom: 8px;
    color: #333;
}

.ai-review-content[b-bhb550xv5b] {
    line-height: 1.5;
    color: #555;
}

.answer-card[b-bhb550xv5b] {
    background: white;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
    margin-bottom: 15px;
    overflow: hidden;
}

.answer-card-title[b-bhb550xv5b] {
    background: #f8fafb;
    padding: 12px 15px;
    border-bottom: 1px solid #e1e8ed;
    font-weight: bold;
    color: #333;
}

.answer-card-content[b-bhb550xv5b] {
    padding: 15px;
    line-height: 1.5;
}

.no-answer[b-bhb550xv5b] {
    color: #999;
    font-style: italic;
}

/* �������� */
.analysis-area[b-bhb550xv5b] {
    margin: 20px 0;
    padding: 15px;
    background: #f8fafb;
    border: 1px solid #e1e8ed;
    border-radius: 8px;
}

.analysis-title[b-bhb550xv5b] {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
}

.analysis-content[b-bhb550xv5b] {
    line-height: 1.6;
    margin-bottom: 15px;
    color: #555;
}

.analysis-actions[b-bhb550xv5b] {
    text-align: right;
}

.feedback-btn[b-bhb550xv5b] {
    background: white;
    border: 1px solid #e1e8ed;
    padding: 6px 12px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
    color: #666;
}

.feedback-btn:hover[b-bhb550xv5b] {
    background: #f5f5f5;
    border-color: #ccc;
}

/* ���غʹ״̬ */
.loading[b-bhb550xv5b], .init-error[b-bhb550xv5b] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-size: 16px;
    color: #666;
}

.init-error[b-bhb550xv5b] {
    color: #f4454c;
}

/* === 选项状态样式 === */
/* 正确选项 */
.option-correct[b-bhb550xv5b] {
    background-color: #e4f9f4;
    border-color: #00c492;
}

.option-correct-text[b-bhb550xv5b] {
    color: #00c492;
}

/* 错误选项 */
.option-incorrect[b-bhb550xv5b] {
    background-color: #feeeef;
    border-color: #f4454c;
}

.option-incorrect-text[b-bhb550xv5b] {
    color: #f4454c;
}

/* 选中选项 */
.option-selected[b-bhb550xv5b] {
    background-color: #dce8fc;
    border-color: #0a59f7;
}

.option-selected-text[b-bhb550xv5b] {
    color: #0a59f7;
}

/* 保存状态文本 */
.save-status[b-bhb550xv5b] {
    margin-left: 1rem;
    font-size: .8rem;
    opacity: .7;
}

/* === мֳȡʽ === */
.indefinite-desc[b-bhb550xv5b] { line-height:1.6; font-size:14px; color:#333; }
.sub-question-title.small[b-bhb550xv5b] { margin:0 0 8px; font-size:14px; }
.sub-question-wrapper.indef-sub-wrapper[b-bhb550xv5b] { margin-bottom:24px; background:#f5f9fd; padding:12px 14px; border:1px solid #d2e2f2; border-radius:6px; }
.question-stem.small-gap[b-bhb550xv5b] { margin-bottom:12px; }
.analysis-area.small-top[b-bhb550xv5b] { margin-top:12px; }
.answer-analysis-area.compact[b-bhb550xv5b] { margin-top:12px; }

/* �м����Ƹ������Ͳ��� */
.intermediate-layout[b-bhb550xv5b] { display:flex; flex-direction:column; gap:14px; }
.intermediate-bg[b-bhb550xv5b] { background:#ffffff; padding:14px 16px; border:1px solid #d2e2f2; border-radius:6px; line-height:1.6; max-height:260px; overflow:auto; }
.intermediate-title[b-bhb550xv5b] { margin-top:0; font-size:15px; }
.intermediate-tabs[b-bhb550xv5b] { display:flex; gap:6px; flex-wrap:wrap; }
.tab-btn[b-bhb550xv5b] { padding:6px 14px; font-size:13px; border:1px solid #b9cfe0; background:#f5f9fd; border-radius:4px; cursor:pointer; }
.tab-btn.active[b-bhb550xv5b] { border-color:#488fc5; background:#e1f1fb; }
.tab-content[b-bhb550xv5b] { background:#ffffff; border:1px solid #d2e2f2; border-radius:6px; padding:16px; min-height:220px; }
.tab-question[b-bhb550xv5b] { margin-bottom:14px; line-height:1.6; }
.text-answer-input.intermediate[b-bhb550xv5b] { background:#ffffff; border:1px solid #cbd9e4; }

/* Override indefinite extracted class names if needed */
.indefinite-layout[b-bhb550xv5b] { position:relative; display:flex; align-items:stretch; gap:0; }
.indef-left[b-bhb550xv5b] { flex:0 0 40%; padding:12px; overflow:auto; max-height:calc(100vh - 220px); }
.indef-right[b-bhb550xv5b] { flex:1; overflow:auto; max-height:calc(100vh - 220px); padding:0 4px 0 16px; }

/* Keep existing indefinite splitter classes mapping */
.indef-split-bar[b-bhb550xv5b] { position:absolute; top:0; left:40%; height:100%; width:6px; overflow:hidden; background:#a1b5fa; cursor:w-resize; z-index:10; border-left:1px solid #9fb7f7; border-right:1px solid #9fb7f7; }
.indef-split-bar.dragging[b-bhb550xv5b] { background:#6c8eff; }
.indef-split-bar:hover[b-bhb550xv5b] { background:#89a2ff; }
/* End of new additions */

/* === 结果报告页面样式 === */
.result-container[b-bhb550xv5b] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: #ddebf6;
    font-size: 14px;
    color: #222;
    position: relative;
    background: #6eb0e9 url('/img/pic_02.png') repeat-x top center;
    margin: 0;
    padding: 0;
}

.result-header[b-bhb550xv5b] {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    padding: 0 30px 0 10px;
    gap: 20px;
    color: #fff;
    height: 101px;
    box-sizing: border-box;
}

.result-body[b-bhb550xv5b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 28px;
    box-sizing: border-box;
}

.result-content[b-bhb550xv5b] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.paper-info[b-bhb550xv5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 800px;
}

.paper-type[b-bhb550xv5b] {
    color: #488fc5;
    font-size: 14px;
    font-weight: bold;
}

.paper-title[b-bhb550xv5b] {
    color: #333;
    font-size: 16px;
    font-weight: bold;
}

.score-indicator[b-bhb550xv5b] {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

.circular-progress[b-bhb550xv5b] {
    position: relative;
    width: 200px;
    height: 200px;
}

.progress-ring[b-bhb550xv5b] {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.progress-ring-bg[b-bhb550xv5b] {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 8;
}

.progress-ring-fill[b-bhb550xv5b] {
    fill: none;
    stroke: #488fc5;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.score-text[b-bhb550xv5b] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.score-value[b-bhb550xv5b] {
    font-size: 42px;
    font-weight: bold;
    color: #333;
}

.score-label[b-bhb550xv5b] {
    font-size: 16px;
    color: #666;
    margin-top: 5px;
}

.global-stats[b-bhb550xv5b] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.stat-item[b-bhb550xv5b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.stat-value[b-bhb550xv5b] {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

.stat-label[b-bhb550xv5b] {
    font-size: 12px;
    color: #666;
    margin-top: 5px;
}

.divider[b-bhb550xv5b] {
    width: 1px;
    height: 40px;
    background: #e0e0e0;
}

.learning-suggestion[b-bhb550xv5b] {
    background: #e3f2fd;
    border-radius: 10px;
    padding: 20px;
    width: 100%;
    max-width: 800px;
}

.learning-suggestion h3[b-bhb550xv5b] {
    margin: 0 0 10px 0;
    color: #1976d2;
    font-size: 18px;
}

.learning-suggestion p[b-bhb550xv5b] {
    margin: 0;
    color: #333;
    line-height: 1.5;
}

.answer-sheet[b-bhb550xv5b] {
    width: 100%;
    max-width: 800px;
    background: #fff;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.answer-sheet h3[b-bhb550xv5b] {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 18px;
}

.section-group[b-bhb550xv5b] {
    margin-bottom: 20px;
}

.section-group h4[b-bhb550xv5b] {
    margin: 0 0 10px 0;
    color: #333;
    font-size: 16px;
    font-weight: bold;
}

.question-grid[b-bhb550xv5b] {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}

.question-cell[b-bhb550xv5b] {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
}

.question-cell.unanswered[b-bhb550xv5b] {
    background: #e0e0e0;
    color: #666;
}

.question-cell.correct[b-bhb550xv5b] {
    background: #2cc6a0;
    color: #fff;
}

.question-cell.incorrect[b-bhb550xv5b] {
    background: #ff5b5a;
    color: #fff;
}

.result-footer[b-bhb550xv5b] {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    background: #fff;
    border-top: 1px solid #b2c8d9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 50;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
}

.nav-btn[b-bhb550xv5b] {
    padding: 10px 30px;
    border-radius: 20px;
    border: 1px solid #488fc5;
    background: #fff;
    color: #488fc5;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn:hover[b-bhb550xv5b] {
    background: #e3f2fd;
}

.nav-btn.primary[b-bhb550xv5b] {
    background: #488fc5;
    color: #fff;
}

.nav-btn.primary:hover[b-bhb550xv5b] {
    background: #3d7aa8;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .global-stats[b-bhb550xv5b] {
        flex-direction: column;
        gap: 15px;
    }
    
    .divider[b-bhb550xv5b] {
        width: 80%;
        height: 1px;
    }
    
    .question-grid[b-bhb550xv5b] {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .result-footer[b-bhb550xv5b] {
        gap: 10px;
        padding: 0 10px;
    }
    
    .nav-btn[b-bhb550xv5b] {
        padding: 8px 20px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .question-grid[b-bhb550xv5b] {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .score-value[b-bhb550xv5b] {
        font-size: 32px;
    }
    
    .stat-value[b-bhb550xv5b] {
        font-size: 20px;
    }
}
/* /Components/Pages/QuestionBank/ExamResult.razor.rz.scp.css */
/* ===== 动画效果 ===== */
@keyframes fade-in-up-b-a8u2si6b00 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse-animation-b-a8u2si6b00 {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes skeleton-loading-b-a8u2si6b00 {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ===== 基础容器样式 ===== */
.exam-result-container[b-a8u2si6b00] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    background: #f8fafc;
    min-height: 100vh;
}

.fade-in-up[b-a8u2si6b00] {
    animation: fade-in-up-b-a8u2si6b00 0.6s ease-out;
}

.pulse-animation[b-a8u2si6b00] {
    animation: pulse-animation-b-a8u2si6b00 2s infinite;
}

/* ===== 试卷信息样式 ===== */
.paper-info[b-a8u2si6b00] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 24px;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.paper-info[b-a8u2si6b00]::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    pointer-events: none;
}

.paper-type-chip[b-a8u2si6b00] {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    margin-bottom: 12px;
}

.paper-title[b-a8u2si6b00] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ===== 成绩指示器容器样式 ===== */
.score-indicator-container[b-a8u2si6b00] {
    background: white;
    border-radius: 16px;
    padding: 40px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
    text-align: center;
}

/* ===== 环形进度条样式 ===== */
.score-indicator[b-a8u2si6b00] {
    position: relative;
    display: inline-block;
    width: 200px;
    height: 200px;
}

.progress-circle[b-a8u2si6b00] {
    width: 200px;
    height: 200px;
    transform: rotate(-90deg);
}

.progress-circle-bg[b-a8u2si6b00] {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 8;
    stroke-linecap: round;
}

.progress-circle-fill[b-a8u2si6b00] {
    fill: none;
    stroke: url(#scoreGradient);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-in-out;
}

/* 定义渐变 */
.score-indicator[b-a8u2si6b00]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);
    border-radius: 50%;
    mask: radial-gradient(circle, transparent 50%, black 50%);
    opacity: 0;
}

.score-content[b-a8u2si6b00] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.score-number[b-a8u2si6b00] {
    font-size: 3rem;
    font-weight: 700;
    color: #667eea;
    line-height: 1;
    margin-bottom: 8px;
    text-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.score-divider[b-a8u2si6b00] {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    margin: 8px auto;
    border-radius: 1px;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);
}

.score-label[b-a8u2si6b00] {
    font-size: 0.9rem;
    color: #8892b0;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* ===== 全局数据分析样式（水平布局） ===== */
.stats-container[b-a8u2si6b00] {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stats-container[b-a8u2si6b00]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 16px 16px 0 0;
}

.stats-item[b-a8u2si6b00] {
    flex: 1;
    text-align: center;
    padding: 0 16px;
}

.stats-divider[b-a8u2si6b00] {
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, transparent, #e2e8f0, transparent);
    flex-shrink: 0;
}

.stats-number[b-a8u2si6b00] {
    font-size: 2.25rem;
    font-weight: 700;
    color: #2d3748;
    margin-bottom: 8px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stats-label[b-a8u2si6b00] {
    font-size: 0.875rem;
    color: #718096;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ===== 学习建议样式 ===== */
.suggestion-card[b-a8u2si6b00] {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border-left: 4px solid #667eea;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
}

.suggestion-card[b-a8u2si6b00]::before {
    content: '💡';
    position: absolute;
    top: 20px;
    right: 24px;
    font-size: 1.5rem;
    opacity: 0.6;
}

.suggestion-title[b-a8u2si6b00] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.suggestion-title[b-a8u2si6b00]::before {
    content: '';
    width: 4px;
    height: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 2px;
}

.suggestion-content[b-a8u2si6b00] {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.6;
    font-weight: 400;
}

/* ===== 答题卡样式 ===== */
.answer-sheet[b-a8u2si6b00] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(102, 126, 234, 0.1);
}

.question-type-section[b-a8u2si6b00] {
    margin-bottom: 32px;
}

.question-type-section:last-child[b-a8u2si6b00] {
    margin-bottom: 0;
}

.question-type-title[b-a8u2si6b00] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
    position: relative;
}

.question-type-title[b-a8u2si6b00]::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 1px;
}

/* ===== 题目网格布局 ===== */
.questions-grid[b-a8u2si6b00] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 12px;
    max-width: 100%;
}

/* ===== 圆形题目按钮样式 ===== */
.question-button[b-a8u2si6b00] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid transparent;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.question-button[b-a8u2si6b00]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at center, rgba(255,255,255,0.3), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.question-button:hover[b-a8u2si6b00]::before {
    opacity: 1;
}

.question-button:hover[b-a8u2si6b00] {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 未作答题目 - 浅灰色 */
.question-button.unanswered[b-a8u2si6b00] {
    background: #f7fafc;
    color: #718096;
    border-color: #e2e8f0;
}

.question-button.unanswered:hover[b-a8u2si6b00] {
    background: #edf2f7;
    border-color: #cbd5e0;
}

/* 正确题目 - 绿色 */
.question-button.correct[b-a8u2si6b00] {
    background: linear-gradient(135deg, #48bb78, #38a169);
    color: white;
    border-color: #38a169;
}

.question-button.correct:hover[b-a8u2si6b00] {
    background: linear-gradient(135deg, #38a169, #2f855a);
}

/* 错误题目 - 红色 */
.question-button.incorrect[b-a8u2si6b00] {
    background: linear-gradient(135deg, #f56565, #e53e3e);
    color: white;
    border-color: #e53e3e;
}

.question-button.incorrect:hover[b-a8u2si6b00] {
    background: linear-gradient(135deg, #e53e3e, #c53030);
}

/* ===== 底部按钮样式 ===== */
.action-buttons[b-a8u2si6b00] {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}

.action-button[b-a8u2si6b00] {
    min-width: 160px;
    height: 48px;
    border-radius: 24px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-transform: none;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    border: none;
}

.action-button[b-a8u2si6b00]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.action-button:hover[b-a8u2si6b00]::before {
    left: 100%;
}

.action-button:hover[b-a8u2si6b00] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* 描边按钮 */
.action-button.outline[b-a8u2si6b00] {
    background: transparent;
    color: #667eea;
    border: 2px solid #667eea;
}

.action-button.outline:hover[b-a8u2si6b00] {
    background: #667eea;
    color: white;
}

/* 填充按钮 */
.action-button.filled[b-a8u2si6b00] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
}

.action-button.filled:hover[b-a8u2si6b00] {
    background: linear-gradient(135deg, #5a6fd8, #6b46c1);
}

/* ===== 错误容器样式 ===== */
.error-container[b-a8u2si6b00] {
    text-align: center;
    padding: 40px 20px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.error-message[b-a8u2si6b00] {
    font-size: 1.125rem;
    color: #e53e3e;
    margin-bottom: 24px;
    font-weight: 500;
}

.back-button[b-a8u2si6b00] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.back-button:hover[b-a8u2si6b00] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

/* ===== 骨架屏样式 ===== */
.skeleton-container[b-a8u2si6b00] {
    animation: fade-in-up-b-a8u2si6b00 0.5s ease-out;
}

.skeleton-element[b-a8u2si6b00] {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 8px;
}

/* 试卷信息骨架 */
.paper-info-skeleton[b-a8u2si6b00] {
    background: linear-gradient(135deg, #e2e8f0, #cbd5e0);
    padding: 24px;
    margin-bottom: 24px;
    border-radius: 16px;
}

.skeleton-chip[b-a8u2si6b00] {
    width: 80px;
    height: 28px;
    margin-bottom: 12px;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
}

.skeleton-title[b-a8u2si6b00] {
    width: 60%;
    height: 24px;
    background: linear-gradient(90deg, rgba(255,255,255,0.3) 25%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0.3) 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 8px;
}

/* 成绩指示器骨架 */
.score-indicator-skeleton[b-a8u2si6b00] {
    background: white;
    border-radius: 16px;
    padding: 40px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.skeleton-progress-circle[b-a8u2si6b00] {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    position: relative;
}

.skeleton-progress-circle[b-a8u2si6b00]::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: white;
}

.skeleton-score-content[b-a8u2si6b00] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.skeleton-score-number[b-a8u2si6b00] {
    width: 80px;
    height: 40px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 8px;
}

.skeleton-score-divider[b-a8u2si6b00] {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 1px;
}

.skeleton-score-label[b-a8u2si6b00] {
    width: 60px;
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 8px;
}

/* 统计数据骨架 */
.stats-container-skeleton[b-a8u2si6b00] {
    background: white;
    border-radius: 16px;
    padding: 32px 24px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.skeleton-stats-item[b-a8u2si6b00] {
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
}

.skeleton-stats-number[b-a8u2si6b00] {
    width: 80px;
    height: 36px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 8px;
}

.skeleton-stats-label[b-a8u2si6b00] {
    width: 80px;
    height: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 8px;
}

/* 学习建议骨架 */
.suggestion-card-skeleton[b-a8u2si6b00] {
    background: linear-gradient(135deg, #f7fafc 0%, #edf2f7 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    border-left: 4px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.skeleton-suggestion-title[b-a8u2si6b00] {
    width: 120px;
    height: 24px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 8px;
}

.skeleton-suggestion-content[b-a8u2si6b00] {
    width: 100%;
    height: 60px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 8px;
}

/* 答题卡骨架 */
.answer-sheet-skeleton[b-a8u2si6b00] {
    background: white;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.question-type-section-skeleton[b-a8u2si6b00] {
    margin-bottom: 32px;
}

.question-type-section-skeleton:last-child[b-a8u2si6b00] {
    margin-bottom: 0;
}

.skeleton-question-type-title[b-a8u2si6b00] {
    width: 100px;
    height: 24px;
    margin-bottom: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    border-radius: 8px;
}

.skeleton-questions-grid[b-a8u2si6b00] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
    gap: 12px;
    max-width: 100%;
}

.skeleton-question-button[b-a8u2si6b00] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
    justify-self: center;
}

/* 底部按钮骨架 */
.action-buttons-skeleton[b-a8u2si6b00] {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 32px;
}

.skeleton-action-button[b-a8u2si6b00] {
    width: 160px;
    height: 48px;
    border-radius: 24px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading-b-a8u2si6b00 1.5s infinite;
}

/* ===== 响应式适配 ===== */
@media (max-width: 768px) {
    .exam-result-container[b-a8u2si6b00] {
        padding: 16px;
    }
    
    .paper-info[b-a8u2si6b00] {
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .score-indicator-container[b-a8u2si6b00] {
        padding: 30px 20px;
    }
    
    .score-indicator[b-a8u2si6b00] {
        width: 160px;
        height: 160px;
    }
    
    .progress-circle[b-a8u2si6b00] {
        width: 160px;
        height: 160px;
    }
    
    .score-number[b-a8u2si6b00] {
        font-size: 2.5rem;
    }
    
    .stats-container[b-a8u2si6b00] {
        flex-direction: column;
        gap: 24px;
        padding: 24px 16px;
    }
    
    .stats-divider[b-a8u2si6b00] {
        width: 60px;
        height: 1px;
        background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    }
    
    .stats-item[b-a8u2si6b00] {
        padding: 0;
    }
    
    .stats-number[b-a8u2si6b00] {
        font-size: 1.875rem;
    }
    
    .suggestion-card[b-a8u2si6b00] {
        padding: 20px;
        margin-bottom: 24px;
    }
    
    .answer-sheet[b-a8u2si6b00] {
        padding: 20px;
        margin-bottom: 24px;
    }
    
    .questions-grid[b-a8u2si6b00] {
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
        gap: 10px;
    }
    
    .question-button[b-a8u2si6b00] {
        width: 44px;
        height: 44px;
        font-size: 0.8rem;
    }
    
    .action-buttons[b-a8u2si6b00] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .action-button[b-a8u2si6b00] {
        min-width: auto;
        width: 100%;
    }
    
    .action-buttons-skeleton[b-a8u2si6b00] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    
    .skeleton-action-button[b-a8u2si6b00] {
        width: 100%;
    }
    
    .stats-container-skeleton[b-a8u2si6b00] {
        flex-direction: column;
        gap: 24px;
        padding: 24px 16px;
    }
    
    .skeleton-questions-grid[b-a8u2si6b00] {
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
        gap: 10px;
    }
    
    .skeleton-question-button[b-a8u2si6b00] {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .exam-result-container[b-a8u2si6b00] {
        padding: 12px;
    }
    
    .paper-info[b-a8u2si6b00] {
        padding: 16px;
    }
    
    .score-indicator-container[b-a8u2si6b00] {
        padding: 24px 16px;
    }
    
    .score-indicator[b-a8u2si6b00] {
        width: 140px;
        height: 140px;
    }
    
    .progress-circle[b-a8u2si6b00] {
        width: 140px;
        height: 140px;
    }
    
    .score-number[b-a8u2si6b00] {
        font-size: 2rem;
    }
    
    .stats-container[b-a8u2si6b00] {
        padding: 20px 12px;
    }
    
    .stats-number[b-a8u2si6b00] {
        font-size: 1.5rem;
    }
    
    .stats-label[b-a8u2si6b00] {
        font-size: 0.8rem;
    }
    
    .suggestion-card[b-a8u2si6b00] {
        padding: 16px;
    }
    
    .answer-sheet[b-a8u2si6b00] {
        padding: 16px;
    }
    
    .questions-grid[b-a8u2si6b00] {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 8px;
    }
    
    .question-button[b-a8u2si6b00] {
        width: 40px;
        height: 40px;
        font-size: 0.75rem;
    }
    
    .skeleton-questions-grid[b-a8u2si6b00] {
        grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
        gap: 8px;
    }
    
    .skeleton-question-button[b-a8u2si6b00] {
        width: 40px;
        height: 40px;
    }
}

/* ===== SVG渐变定义 ===== */
svg defs[b-a8u2si6b00] {
    position: absolute;
    width: 0;
    height: 0;
}
/* /Components/Pages/StudyPlan/StudyPlan.razor.rz.scp.css */
/* ѧϰ�ƻ�ҳ����ʽ */
.study-plan-container[b-2d4c19pxdb] {
    min-height: 100vh;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    position: relative;
    overflow-x: hidden;
}

/* ҳ��ͷ�� */
.plan-header[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 2rem 2rem;
    position: relative;
    overflow: hidden;
}

.plan-header[b-2d4c19pxdb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" patternUnits="userSpaceOnUse" width="100" height="100"><circle cx="25" cy="25" r="2" fill="%23ffffff" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="%23ffffff" opacity="0.1"/><circle cx="50" cy="10" r="1.5" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grain)"/></svg>');
}

.header-content[b-2d4c19pxdb] {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2rem;
    position: relative;
    z-index: 1;
}

.title-section[b-2d4c19pxdb] {
    flex: 1;
    min-width: 300px;
}

.page-title[b-2d4c19pxdb] {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-subtitle[b-2d4c19pxdb] {
    font-size: 1.125rem;
    margin: 0 0 1.5rem 0;
    opacity: 0.9;
    font-weight: 400;
}

/* ��Ŀ��ǩ */
.subject-tabs[b-2d4c19pxdb] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.subject-tab[b-2d4c19pxdb] {
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.subject-tab:hover[b-2d4c19pxdb] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.subject-tab.active[b-2d4c19pxdb] {
    background: white;
    color: #667eea;
    border-color: white;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ͷ���Ҳ����� */
.header-right[b-2d4c19pxdb] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1.5rem;
}

.header-stats[b-2d4c19pxdb] {
    display: flex;
    gap: 1.5rem;
}

.stat-item[b-2d4c19pxdb] {
    text-align: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 1.5rem 1rem;
    border-radius: 16px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    min-width: 80px;
    transition: all 0.3s ease;
}

.stat-item:hover[b-2d4c19pxdb] {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* ��ӵ����ʽ */
.stat-item[style*="cursor: pointer;"]:hover[b-2d4c19pxdb] {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-number[b-2d4c19pxdb] {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label[b-2d4c19pxdb] {
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 500;
}

/* ��ݹ����� */
.year-filter[b-2d4c19pxdb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    padding: 0.75rem 1rem;
    border-radius: 12px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.filter-label[b-2d4c19pxdb] {
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    opacity: 0.9;
    margin: 0;
    white-space: nowrap;
}

.year-selector[b-2d4c19pxdb] {
    background: rgba(255, 255, 255, 0.9);
    color: #1e293b;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    min-width: 80px;
    transition: all 0.2s ease;
}

.year-selector:focus[b-2d4c19pxdb] {
    outline: none;
    background: white;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
}

/* ��Ҫ�������� */
.plan-content[b-2d4c19pxdb] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
    position: relative;
    z-index: 10;
}

/* ʱ�������� */
.timeline-container[b-2d4c19pxdb] {
    position: relative;
    padding: 2rem 0;
}

.timeline-container[b-2d4c19pxdb]::before {
    content: '';
    position: absolute;
    left: 152px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 50%, #e2e8f0 100%);
    border-radius: 2px;
    z-index: 1;
}

/* ʱ������Ŀ */
.timeline-item[b-2d4c19pxdb] {
    display: flex;
    margin-bottom: 3rem;
    position: relative;
    align-items: flex-start;
    transition: all 0.3s ease;
}

.timeline-item.current .timeline-right .plan-card[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #fefefe 0%, #f8fafc 100%);
    border: 2px solid #3b82f6;
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
    transform: scale(1.02);
}

.timeline-item.completed .timeline-right .plan-card[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #f0f9ff 0%, #ecfdf5 100%);
    border: 1px solid #10b981;
}

.timeline-item.failed .timeline-right .plan-card[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #fef2f2 0%, #fef7f7 100%);
    border: 1px solid #ef4444;
}

.timeline-item.expired .timeline-right .plan-card[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
    border: 1px solid #9ca3af;
    opacity: 0.7;
}

/* ��������Ч�� */
.timeline-item.highlight-scroll[b-2d4c19pxdb] {
    animation: highlightScroll-b-2d4c19pxdb 2s ease-in-out;
}

.timeline-item.highlight-scroll .plan-card[b-2d4c19pxdb] {
    border: 2px solid #f59e0b !important;
    box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.2), 0 12px 40px rgba(245, 158, 11, 0.15) !important;
    transform: scale(1.03) !important;
}

@keyframes highlightScroll-b-2d4c19pxdb {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.02);
    }
    50% {
        transform: scale(1.03);
    }
    75% {
        transform: scale(1.02);
    }
    100% {
        transform: scale(1);
    }
}

/* ʱ������� */
.timeline-left[b-2d4c19pxdb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.timeline-date[b-2d4c19pxdb] {
    text-align: center;
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e2e8f0;
    min-width: 80px;
}

.date-day[b-2d4c19pxdb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
}

.date-month[b-2d4c19pxdb] {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.25rem 0;
    font-weight: 500;
}

.date-year[b-2d4c19pxdb] {
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
}

/* ʱ����״̬�� */
.timeline-dot[b-2d4c19pxdb] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 140px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.timeline-dot.pending[b-2d4c19pxdb] {
    background: #e2e8f0;
    border-color: #cbd5e1;
}

.timeline-dot.active[b-2d4c19pxdb] {
    background: #3b82f6;
    border-color: white;
    animation: pulse-b-2d4c19pxdb 2s infinite;
}

.timeline-dot.completed[b-2d4c19pxdb] {
    background: #10b981;
    border-color: white;
}

.timeline-dot.failed[b-2d4c19pxdb] {
    background: #ef4444;
    border-color: white;
}

.dot-pulse[b-2d4c19pxdb] {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: pulse-inner-b-2d4c19pxdb 1.5s ease-in-out infinite;
}

.dot-check[b-2d4c19pxdb],
.dot-cross[b-2d4c19pxdb] {
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

@keyframes pulse-b-2d4c19pxdb {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

@keyframes pulse-inner-b-2d4c19pxdb {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.8);
    }
}

/* ʱ�����Ҳ� */
.timeline-right[b-2d4c19pxdb] {
    flex: 1;
    margin-left: 80px; /* �����ڵ�ʱ���ߵľ��뱣��һ�� */
}

.plan-card[b-2d4c19pxdb] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.plan-card:hover[b-2d4c19pxdb] {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* �׶α�ǩ */
.plan-stage-tag[b-2d4c19pxdb] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    border-bottom-right-radius: 16px;
    z-index: 2;
}

.plan-stage-tag.stage-basic[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.plan-stage-tag.stage-enhanced[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.plan-stage-tag.stage-improve[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.plan-stage-tag.stage-sprint[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.plan-stage-tag.stage-final[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.plan-stage-tag.stage-review[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.plan-stage-tag.stage-other[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
}

.plan-header-info[b-2d4c19pxdb] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.plan-meta[b-2d4c19pxdb] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.plan-subject[b-2d4c19pxdb] {
    padding: 0.375rem 0.75rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid #e2e8f0;
}

.plan-status[b-2d4c19pxdb] {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.status-pending[b-2d4c19pxdb] {
    background: #f8fafc;
    color: #64748b;
    border: 1px solid #cbd5e1;
}

.status-progress[b-2d4c19pxdb] {
    background: #dbeafe;
    color: #1d4ed8;
    border: 1px solid #93c5fd;
}

.status-review[b-2d4c19pxdb] {
    background: #fef3c7;
    color: #d97706;
    border: 1px solid #fbbf24;
}

.status-success[b-2d4c19pxdb] {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #34d399;
}

.status-error[b-2d4c19pxdb] {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fca5a5;
}

.status-expired[b-2d4c19pxdb] {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

.plan-title[b-2d4c19pxdb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.5rem 0;
    line-height: 1.4;
}

.plan-details[b-2d4c19pxdb] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.detail-item[b-2d4c19pxdb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #f8fafc;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    border: 1px solid #f1f5f9;
}

.detail-icon[b-2d4c19pxdb] {
    font-size: 0.875rem;
}

.detail-text[b-2d4c19pxdb] {
    font-size: 0.875rem;
    color: #475569;
    font-weight: 500;
}

.plan-actions[b-2d4c19pxdb] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.action-btn[b-2d4c19pxdb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.action-btn[b-2d4c19pxdb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.action-btn:hover[b-2d4c19pxdb]::before {
    left: 100%;
}

.action-btn.primary[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: 1px solid transparent;
}

.action-btn.primary:hover[b-2d4c19pxdb] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.action-btn.secondary[b-2d4c19pxdb] {
    background: white;
    color: #475569;
    border: 1px solid #d1d5db;
}

.action-btn.secondary:hover[b-2d4c19pxdb] {
    background: #f8fafc;
    border-color: #9ca3af;
}

.action-btn.info[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    border: 1px solid transparent;
}

.action-btn.info:hover[b-2d4c19pxdb] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

.action-btn.disabled[b-2d4c19pxdb] {
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    cursor: not-allowed;
}

.action-btn:disabled[b-2d4c19pxdb] {
    background: #f3f4f6;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    cursor: not-allowed;
}

.btn-icon[b-2d4c19pxdb] {
    font-size: 0.875rem;
}

/* ���عǼ��� */
.timeline-skeleton[b-2d4c19pxdb] {
    padding: 2rem 0;
}

.timeline-item-skeleton[b-2d4c19pxdb] {
    display: flex;
    margin-bottom: 3rem;
    align-items: flex-start;
    position: relative;
}

/* ʱ�������Ǽ� */
.timeline-left-skeleton[b-2d4c19pxdb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.timeline-date-skeleton[b-2d4c19pxdb] {
    background: white;
    padding: 1rem;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #f0f0f0;
    min-width: 80px;
    text-align: center;
}

.skeleton-date-day[b-2d4c19pxdb] {
    height: 20px;
    width: 30px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
    border-radius: 4px;
    margin: 0 auto 8px;
}

.skeleton-date-month[b-2d4c19pxdb] {
    height: 12px;
    width: 24px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
    border-radius: 3px;
    margin: 0 auto 4px;
}

.skeleton-date-year[b-2d4c19pxdb] {
    height: 12px;
    width: 32px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
    border-radius: 3px;
    margin: 0 auto;
}

/* ʱ����״̬��Ǽ� */
.timeline-dot-skeleton[b-2d4c19pxdb] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: absolute;
    left: 140px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
    border: 3px solid white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* ʱ�����Ҳ�Ǽ� */
.timeline-right-skeleton[b-2d4c19pxdb] {
    flex: 1;
    margin-left: 80px;
}

.plan-card-skeleton[b-2d4c19pxdb] {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

/* �׶α�ǩ�Ǽ� */
.skeleton-stage-tag[b-2d4c19pxdb] {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 32px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
    border-bottom-right-radius: 16px;
}

/* ͷ����Ϣ�Ǽ� */
.skeleton-header-info[b-2d4c19pxdb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0 1.5rem 0;
    flex-wrap: wrap;
    gap: 1rem;
}

.skeleton-subject-tag[b-2d4c19pxdb] {
    width: 60px;
    height: 24px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
    border-radius: 20px;
}

.skeleton-status-tag[b-2d4c19pxdb] {
    width: 50px;
    height: 24px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
    border-radius: 20px;
}

/* ����Ǽ� */
.skeleton-title[b-2d4c19pxdb] {
    height: 28px;
    width: 75%;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
    border-radius: 4px;
    margin-bottom: 1.5rem;
}

/* ��ϸ��Ϣ�Ǽ� */
.skeleton-details[b-2d4c19pxdb] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.skeleton-detail-item[b-2d4c19pxdb] {
    width: 120px;
    height: 28px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
    border-radius: 8px;
}

/* ������ť�Ǽ� */
.skeleton-actions[b-2d4c19pxdb] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.skeleton-button[b-2d4c19pxdb] {
    height: 36px;
    border-radius: 8px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-b-2d4c19pxdb 1.5s infinite;
}

.skeleton-button.primary[b-2d4c19pxdb] {
    width: 90px;
}

.skeleton-button.secondary[b-2d4c19pxdb] {
    width: 80px;
}

@keyframes loading-b-2d4c19pxdb {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ����Ϳ�״̬ */
.error-state[b-2d4c19pxdb],
.empty-state[b-2d4c19pxdb] {
    text-align: center;
    padding: 4rem 2rem;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #f0f0f0;
}

.error-icon[b-2d4c19pxdb],
.empty-icon[b-2d4c19pxdb] {
    font-size: 4rem;
    margin-bottom: 1rem;
    display: block;
}

.error-title[b-2d4c19pxdb],
.empty-title[b-2d4c19pxdb] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.5rem 0;
}

.error-message[b-2d4c19pxdb],
.empty-message[b-2d4c19pxdb] {
    color: #64748b;
    margin: 0 0 2rem 0;
    line-height: 1.6;
}

.retry-button[b-2d4c19pxdb],
.back-button[b-2d4c19pxdb] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.retry-button:hover[b-2d4c19pxdb],
.back-button:hover[b-2d4c19pxdb] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.retry-icon[b-2d4c19pxdb] {
    font-size: 1rem;
}

/* ������ʽ */
.modal-overlay[b-2d4c19pxdb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
    animation: fadeIn-b-2d4c19pxdb 0.2s ease;
}

.modal-content[b-2d4c19pxdb] {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    animation: slideIn-b-2d4c19pxdb 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-header[b-2d4c19pxdb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f0f0f0;
}

.modal-title[b-2d4c19pxdb] {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.modal-close[b-2d4c19pxdb] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #9ca3af;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close:hover[b-2d4c19pxdb] {
    background: #f3f4f6;
    color: #6b7280;
}

.modal-body[b-2d4c19pxdb] {
    padding: 2rem;
}

.modal-footer[b-2d4c19pxdb] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid #f0f0f0;
}

.modal-btn[b-2d4c19pxdb] {
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-btn.primary[b-2d4c19pxdb] {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: white;
}

.modal-btn.primary:hover:not(:disabled)[b-2d4c19pxdb] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

.modal-btn.secondary[b-2d4c19pxdb] {
    background: #f8fafc;
    color: #475569;
    border: 1px solid #d1d5db;
}

.modal-btn.secondary:hover[b-2d4c19pxdb] {
    background: #f1f5f9;
}

.modal-btn:disabled[b-2d4c19pxdb] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* �ƻ����� */
.plan-detail[b-2d4c19pxdb] {
    line-height: 1.6;
}

.detail-title[b-2d4c19pxdb] {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem 0;
}

.detail-info[b-2d4c19pxdb] {
    background: #f8fafc;
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

.info-item[b-2d4c19pxdb] {
    margin-bottom: 0.5rem;
    font-size: 0.9375rem;
    color: #475569;
}

.info-item:last-child[b-2d4c19pxdb] {
    margin-bottom: 0;
}

.info-item strong[b-2d4c19pxdb] {
    color: #1e293b;
}

.detail-description[b-2d4c19pxdb] {
    font-size: 0.9375rem;
    color: #475569;
}

.detail-description strong[b-2d4c19pxdb] {
    color: #1e293b;
    display: block;
    margin-bottom: 0.5rem;
}

.detail-description p[b-2d4c19pxdb] {
    margin: 0;
    line-height: 1.6;
}

/* ����ʱ�� */
.adjust-content[b-2d4c19pxdb] {
    line-height: 1.6;
}

.adjust-plan[b-2d4c19pxdb] {
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
    color: #475569;
}

.adjust-plan strong[b-2d4c19pxdb] {
    color: #1e293b;
}

.input-group[b-2d4c19pxdb] {
    margin-bottom: 1rem;
}

.input-label[b-2d4c19pxdb] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #374151;
    font-size: 0.875rem;
}

.date-input[b-2d4c19pxdb] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 0.9375rem;
    background: white;
    transition: border-color 0.2s ease;
}

.date-input:focus[b-2d4c19pxdb] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.adjust-note[b-2d4c19pxdb] {
    color: #d97706;
    font-size: 0.875rem;
    margin: 0;
    background: #fef3c7;
    padding: 0.75rem;
    border-radius: 8px;
    border: 1px solid #fbbf24;
}

/* ���ض��� */
.loading-spinner[b-2d4c19pxdb] {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin-b-2d4c19pxdb 1s linear infinite;
}

@keyframes spin-b-2d4c19pxdb {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fadeIn-b-2d4c19pxdb {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-2d4c19pxdb {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ��Ӧʽ��� */
@media (max-width: 768px) {
    .study-plan-container[b-2d4c19pxdb] {
        padding: 0;
    }

    .plan-header[b-2d4c19pxdb] {
        padding: 2rem 1rem 1.5rem;
    }

    .header-content[b-2d4c19pxdb] {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem;
        align-items: center;
    }

    .title-section[b-2d4c19pxdb] {
        min-width: auto;
        width: 100%;
    }

    .page-title[b-2d4c19pxdb] {
        font-size: 2rem;
    }

    .subject-tabs[b-2d4c19pxdb] {
        justify-content: center;
    }

    .header-right[b-2d4c19pxdb] {
        align-items: center;
        width: 100%;
    }

    .header-stats[b-2d4c19pxdb] {
        gap: 1rem;
    }

    .stat-item[b-2d4c19pxdb] {
        padding: 1rem 0.75rem;
        min-width: 70px;
    }

    .year-filter[b-2d4c19pxdb] {
        justify-content: center;
    }

    .plan-content[b-2d4c19pxdb] {
        padding: 1rem 1rem 2rem;
    }

    .timeline-container[b-2d4c19pxdb]::before {
        left: 92px;
    }

    .timeline-dot[b-2d4c19pxdb] {
        left: 80px;
    }

    .timeline-dot-skeleton[b-2d4c19pxdb] {
        left: 80px;
    }

    .timeline-left[b-2d4c19pxdb] {
        width: 80px;
    }

    .timeline-left-skeleton[b-2d4c19pxdb] {
        width: 80px;
    }

    .timeline-date[b-2d4c19pxdb] {
        padding: 0.75rem 0.5rem;
        min-width: 60px;
    }

    .timeline-date-skeleton[b-2d4c19pxdb] {
        padding: 0.75rem 0.5rem;
        min-width: 60px;
    }

    .date-day[b-2d4c19pxdb] {
        font-size: 1.25rem;
    }

    .skeleton-date-day[b-2d4c19pxdb] {
        height: 18px;
        width: 28px;
    }

    .timeline-right[b-2d4c19pxdb] {
        margin-left: 24px; /* �����ƶ��˵ľ��룬���������ڵ�ʱ���ߵı��� (92px - 80px + 12px = 24px) */
    }

    .timeline-right-skeleton[b-2d4c19pxdb] {
        margin-left: 24px; /* ����һ�� */
    }

    .plan-card[b-2d4c19pxdb] {
        padding: 1.5rem;
    }

    .plan-card-skeleton[b-2d4c19pxdb] {
        padding: 1.5rem;
    }

    .plan-header-info[b-2d4c19pxdb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .skeleton-header-info[b-2d4c19pxdb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .plan-actions[b-2d4c19pxdb] {
        flex-direction: column;
    }

    .skeleton-actions[b-2d4c19pxdb] {
        flex-direction: column;
    }

    .action-btn[b-2d4c19pxdb] {
        justify-content: center;
        width: 100%;
    }

    .skeleton-button[b-2d4c19pxdb] {
        width: 100%;
    }

    .modal-content[b-2d4c19pxdb] {
        width: 95%;
        margin: 1rem;
    }

    .modal-header[b-2d4c19pxdb],
    .modal-body[b-2d4c19pxdb],
    .modal-footer[b-2d4c19pxdb] {
        padding: 1rem 1.5rem;
    }

    .modal-footer[b-2d4c19pxdb] {
        flex-direction: column;
    }

    .modal-btn[b-2d4c19pxdb] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .plan-header[b-2d4c19pxdb] {
        padding: 1.5rem 0.75rem 1.25rem;
    }

    .page-title[b-2d4c19pxdb] {
        font-size: 1.75rem;
    }

    .page-subtitle[b-2d4c19pxdb] {
        font-size: 1rem;
    }

    .subject-tabs[b-2d4c19pxdb] {
        gap: 0.5rem;
    }

    .subject-tab[b-2d4c19pxdb] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8125rem;
    }

    .header-stats[b-2d4c19pxdb] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .plan-content[b-2d4c19pxdb] {
        padding: 0.75rem 0.75rem 1.5rem;
    }

    .timeline-container[b-2d4c19pxdb]::before {
        left: 72px;
    }

    .timeline-dot[b-2d4c19pxdb] {
        left: 60px;
    }

    .timeline-dot-skeleton[b-2d4c19pxdb] {
        left: 60px;
        width: 20px;
        height: 20px;
    }

    .timeline-left[b-2d4c19pxdb] {
        width: 60px;
    }

    .timeline-left-skeleton[b-2d4c19pxdb] {
        width: 60px;
    }

    .timeline-date[b-2d4c19pxdb] {
        padding: 0.5rem 0.25rem;
        min-width: 50px;
    }

    .timeline-date-skeleton[b-2d4c19pxdb] {
        padding: 0.5rem 0.25rem;
        min-width: 50px;
    }

    .date-day[b-2d4c19pxdb] {
        font-size: 1rem;
    }

    .skeleton-date-day[b-2d4c19pxdb] {
        height: 16px;
        width: 24px;
    }

    .date-month[b-2d4c19pxdb],
    .date-year[b-2d4c19pxdb] {
        font-size: 0.625rem;
    }

    .skeleton-date-month[b-2d4c19pxdb],
    .skeleton-date-year[b-2d4c19pxdb] {
        height: 10px;
        width: 20px;
    }

    .timeline-dot[b-2d4c19pxdb] {
        width: 20px;
        height: 20px;
    }

    .timeline-right[b-2d4c19pxdb] {
        margin-left: 20px; /* ����С��Ļ�ľ��룬���������ڵ�ʱ���ߵı��� (72px - 60px + 8px = 20px) */
    }

    .timeline-right-skeleton[b-2d4c19pxdb] {
        margin-left: 20px; /* ����һ�� */
    }

    .plan-card[b-2d4c19pxdb] {
        padding: 1rem;
    }

    .plan-card-skeleton[b-2d4c19pxdb] {
        padding: 1rem;
    }

    .plan-title[b-2d4c19pxdb] {
        font-size: 1.125rem;
    }

    .skeleton-title[b-2d4c19pxdb] {
        height: 24px;
    }

    .plan-details[b-2d4c19pxdb] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .skeleton-details[b-2d4c19pxdb] {
        flex-direction: column;
        gap: 0.5rem;
    }

    .detail-item[b-2d4c19pxdb] {
        padding: 0.375rem 0.5rem;
    }

    .skeleton-detail-item[b-2d4c19pxdb] {
        width: 100%;
        height: 24px;
    }

    .error-state[b-2d4c19pxdb],
    .empty-state[b-2d4c19pxdb] {
        padding: 2rem 1rem;
    }

    .error-icon[b-2d4c19pxdb],
    .empty-icon[b-2d4c19pxdb] {
        font-size: 3rem;
    }
}