/* /Components/AliyunDrivePromotionComponent.razor.rz.scp.css */
/* AliyunDrivePromotions.razor.css */

.promotion-container[b-1ke8vewa70] {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    position: relative;
}

.promotion-header[b-1ke8vewa70] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 3rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.promotion-header[b-1ke8vewa70]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.1;
}

.hero-content[b-1ke8vewa70] {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero-icon[b-1ke8vewa70] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #ffd700;
}

.hero-title[b-1ke8vewa70] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-subtitle[b-1ke8vewa70] {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.loading-container[b-1ke8vewa70],
.error-container[b-1ke8vewa70],
.empty-state[b-1ke8vewa70] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: var(--bg-primary);
    margin: 2rem auto;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.loading-text[b-1ke8vewa70] {
    margin-top: 1rem;
    color: var(--text-secondary);
}

.empty-icon[b-1ke8vewa70] {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.promotion-tabs[b-1ke8vewa70] {
    background: var(--bg-primary);
    margin: 2rem auto;
    max-width: 1200px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tabs-container[b-1ke8vewa70] {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
}

.tab-button[b-1ke8vewa70] {
    flex: 1;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.tab-button:hover[b-1ke8vewa70] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.tab-button.active[b-1ke8vewa70] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: var(--bg-secondary);
}

.promotion-card[b-1ke8vewa70] {
    background: var(--bg-primary);
    margin: 2rem auto;
    max-width: 1200px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header[b-1ke8vewa70] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    text-align: center;
}

.promotion-title[b-1ke8vewa70] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.promotion-subtitle[b-1ke8vewa70] {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.card-body[b-1ke8vewa70] {
    padding: 2rem;
}

.agreement-section[b-1ke8vewa70] {
    text-align: center;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 2rem;
}

.agreement-content[b-1ke8vewa70] {
    max-width: 600px;
    margin: 0 auto;
}

.agreement-text[b-1ke8vewa70] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.qr-section[b-1ke8vewa70] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: center;
}

.qr-container[b-1ke8vewa70] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px dashed var(--border-color);
}

.qr-container:hover[b-1ke8vewa70] {
    border-color: var(--primary-color);
    background: var(--bg-secondary);
}

.qr-instructions[b-1ke8vewa70] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.instruction-text[b-1ke8vewa70] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.rules-section[b-1ke8vewa70],
.notices-section[b-1ke8vewa70] {
    margin-bottom: 2rem;
}

.rules-title[b-1ke8vewa70],
.notices-title[b-1ke8vewa70] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rules-content[b-1ke8vewa70],
.notices-content[b-1ke8vewa70] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rule-item[b-1ke8vewa70],
.notice-item[b-1ke8vewa70] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 4px solid var(--primary-color);
}

.notice-item[b-1ke8vewa70] {
    border-left-color: var(--warning-color);
}

.rule-item i[b-1ke8vewa70],
.notice-item i[b-1ke8vewa70] {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.rule-item span[b-1ke8vewa70],
.notice-item span[b-1ke8vewa70] {
    flex: 1;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Commercial styling enhancements */
.btn-primary[b-1ke8vewa70] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover[b-1ke8vewa70] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

.btn-success[b-1ke8vewa70] {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    transition: all 0.3s ease;
}

.btn-success:hover[b-1ke8vewa70] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

/* Responsive design */
@media (max-width: 768px) {
    .hero-title[b-1ke8vewa70] {
        font-size: 2rem;
    }
    
    .hero-subtitle[b-1ke8vewa70] {
        font-size: 1rem;
    }
    
    .promotion-card[b-1ke8vewa70] {
        margin: 1rem;
    }
    
    .card-body[b-1ke8vewa70] {
        padding: 1rem;
    }
    
    .qr-section[b-1ke8vewa70] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .tabs-container[b-1ke8vewa70] {
        flex-direction: column;
    }
    
    .tab-button[b-1ke8vewa70] {
        text-align: center;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *[b-1ke8vewa70] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .promotion-header[b-1ke8vewa70] {
        background: var(--text-primary);
        color: var(--bg-primary);
    }
    
    .promotion-card[b-1ke8vewa70] {
        border: 2px solid var(--text-primary);
    }
}
/* /Components/FilePropertiesPanel.razor.rz.scp.css */
/* ===================================
   FILE PROPERTIES PANEL STYLES
   =================================== */

/* Base panel styles */
.file-properties-panel[b-cqyo084ygk] {
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
    z-index: 100;
    transition: all 0.3s ease;
    overflow: hidden; /* Prevent base panel from scrolling */
    /* Ensure solid background */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Desktop layout - flex item that takes up space */
.file-properties-panel.desktop[b-cqyo084ygk] {
    width: 300px;
    height: 100vh;
    flex-shrink: 0;
    background: var(--bg-primary);
    border-left: 1px solid var(--border-color);
    z-index: 99; /* Lower than sticky headers */
    position: relative;
    display: flex;
    flex-direction: column;
    max-height: 100vh; /* Ensure it doesn't exceed viewport */
}

.file-properties-panel.desktop.visible[b-cqyo084ygk] {
    display: flex;
}

.file-properties-panel.desktop.hidden[b-cqyo084ygk] {
    display: none;
}

/* Mobile layout - bottom sheet */
.file-properties-panel.mobile[b-cqyo084ygk] {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70vh;
    max-height: 600px;
    border-left: none;
    border-top: 1px solid var(--border-color);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    transform: translateY(100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 1000;
}

.file-properties-panel.mobile.visible[b-cqyo084ygk] {
    transform: translateY(0);
}

.file-properties-panel.mobile.hidden[b-cqyo084ygk] {
    transform: translateY(100%);
    pointer-events: none;
}

/* Panel Header */
.properties-header[b-cqyo084ygk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.properties-title[b-cqyo084ygk] {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 0.7rem;
    color: var(--text-primary);
}

.properties-close[b-cqyo084ygk] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.properties-close:hover[b-cqyo084ygk] {
    background: var(--bg-hover) !important;
    color: var(--text-primary);
}

.properties-close:focus[b-cqyo084ygk] {
    background: var(--bg-hover) !important;
    color: var(--text-primary);
}

/* Panel Content */
.properties-content[b-cqyo084ygk] {
    padding: 0 0 0.2rem 0; /* Add bottom padding to ensure content is never cut off */
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    height: 0; /* This forces the flex item to shrink and enables scrolling */
    min-height: 0; /* Allow shrinking below content size */
    max-height: calc(100vh - 80px); /* Subtract header height explicitly */
    /* Improve scrolling experience */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Custom scrollbar for webkit browsers */
.properties-content[b-cqyo084ygk]::-webkit-scrollbar {
    width: 6px;
}

.properties-content[b-cqyo084ygk]::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.properties-content[b-cqyo084ygk]::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

.properties-content[b-cqyo084ygk]::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Properties Sections */
.properties-section[b-cqyo084ygk] {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    position: relative;
}

.properties-section:last-child[b-cqyo084ygk] {
    border-bottom: none;
    padding-bottom: 2rem; /* Extra padding to ensure content is fully visible when scrolled */
}

/* Compact Card Layout */
.card[b-cqyo084ygk] {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.card-body[b-cqyo084ygk] {
    padding: 0.75rem;
}

/* Compact Properties Table */
.properties-table[b-cqyo084ygk] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: 11px;
}

.properties-table .name[b-cqyo084ygk] {
    font-size: 11px;
    min-width: 20px;
    width: 32%;
    text-align: right;
    vertical-align: middle;
    padding: 3px 5px;
    color: var(--text-secondary);
    font-weight: 500;
}

.properties-table .value[b-cqyo084ygk] {
    font-size: 11px;
    max-width: 100px;
    padding: 3px 5px;
    text-align: left;
    vertical-align: middle;
    word-break: break-all;
    color: var(--text-primary);
}

/* Section Dividers */
.section-divider[b-cqyo084ygk] {
    margin: 4px 0;
    border: none;
    height: 1px;
    background: var(--border-color);
}

/* Actions Section */
.actions-section[b-cqyo084ygk] {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border-color);
}

.actions-grid[b-cqyo084ygk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}

.action-btn[b-cqyo084ygk] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem;
    font-size: 0.75rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.action-btn:hover[b-cqyo084ygk] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.action-btn i[b-cqyo084ygk] {
    margin-right: 0.25rem;
}

/* Progress Bar for Space Usage */
.space-progress[b-cqyo084ygk] {
    height: 12px;
    border-radius: 3px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.space-progress:hover[b-cqyo084ygk] {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.space-progress-container[b-cqyo084ygk] {
    margin-top: 0.25rem;
}

.progress-bar[b-cqyo084ygk] {
    border-radius: 3px;
    font-size: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 500;
    transition: width 0.5s ease-in-out, background 0.3s ease-in-out;
}

/* Usage level gradient classes - from green to usage-appropriate color */
.progress-bar.usage-low[b-cqyo084ygk] {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%); /* Green to darker green - Low usage (0-50%) */
}

.progress-bar.usage-medium[b-cqyo084ygk] {
    background: linear-gradient(90deg, #22c55e 0%, #eab308 100%); /* Green to yellow - Medium usage (50-80%) */
}

.progress-bar.usage-high[b-cqyo084ygk] {
    background: linear-gradient(90deg, #22c55e 0%, #f97316 100%); /* Green to orange - High usage (80-90%) */
}

.progress-bar.usage-critical[b-cqyo084ygk] {
    background: linear-gradient(90deg, #22c55e 0%, #ef4444 100%); /* Green to red - Critical usage (90%+) */
}

/* Encryption Badge */
.encryption-badge[b-cqyo084ygk] {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}

.encryption-badge.encrypted[b-cqyo084ygk] {
    background: var(--bs-danger);
    color: white;
}

.encryption-badge.unlocked[b-cqyo084ygk] {
    background: var(--bs-success);
    color: white;
}

.encryption-badge.none[b-cqyo084ygk] {
    background: var(--bs-secondary);
    color: white;
}

/* Beta Badge */
/* .beta-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: var(--bs-warning);
    color: var(--bs-dark);
    font-size: 0.6rem;
    padding: 0.1rem 0.3rem;
    border-radius: 8px;
    font-weight: 600;
    z-index: 1;
} */

/* Section titles */
.section-title[b-cqyo084ygk] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

/* File Preview Section */
.file-preview[b-cqyo084ygk],
.folder-preview[b-cqyo084ygk] {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.5rem;
    min-height: 60px;
    background: var(--bg-secondary);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.preview-image[b-cqyo084ygk] {
    max-width: 100%;
    max-height: 60px;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.preview-fallback[b-cqyo084ygk],
.preview-icon[b-cqyo084ygk] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 60px;
    background: var(--bg-secondary);
    border-radius: 4px;
}

/* File/Folder Name Section */
.file-name-section[b-cqyo084ygk],
.folder-name-section[b-cqyo084ygk] {
    text-align: center;
    margin-bottom: 0.5rem;
}

.file-name[b-cqyo084ygk],
.folder-name[b-cqyo084ygk] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.125rem 0;
    word-break: break-word;
    line-height: 1.3;
}

.file-type[b-cqyo084ygk],
.folder-type[b-cqyo084ygk] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 0.125rem 0.5rem;
    border-radius: 8px;
    display: inline-block;
}

/* Section Titles */
.section-title[b-cqyo084ygk] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

/* Properties Grid */
.properties-grid[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.property-row[b-cqyo084ygk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.property-label[b-cqyo084ygk] {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 60px;
    flex-shrink: 0;
    font-size: 0.75rem;
}

.property-value[b-cqyo084ygk] {
    color: var(--text-primary);
    text-align: right;
    word-break: break-word;
    flex: 1;
    font-size: 0.75rem;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* Actions Grid */
.actions-grid[b-cqyo084ygk] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
}

.action-btn[b-cqyo084ygk] {
    padding: 0.375rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid var(--border-color) !important;
    outline: none !important;
    box-shadow: none !important;
}

.action-btn:hover[b-cqyo084ygk] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.action-btn:focus[b-cqyo084ygk] {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25) !important;
}

.action-btn:active[b-cqyo084ygk] {
    transform: translateY(0);
    box-shadow: none !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .file-properties-panel.mobile[b-cqyo084ygk] {
        height: 75vh;
        max-height: none;
    }
    
    /* Ensure mobile content can scroll properly */
    .file-properties-panel.mobile .properties-content[b-cqyo084ygk] {
        height: calc(75vh - 80px); /* Subtract header height */
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .properties-header[b-cqyo084ygk] {
        padding: 1rem;
        background: var(--bg-primary);
        border-bottom: 2px solid var(--border-color);
    }
    
    .properties-header[b-cqyo084ygk]::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--text-muted);
        border-radius: 2px;
        opacity: 0.3;
    }
    
    .properties-title[b-cqyo084ygk] {
        font-size: 0.8rem;
    }
    
    .properties-section[b-cqyo084ygk] {
        padding: 1rem;
    }
    
    .file-preview[b-cqyo084ygk],
    .folder-preview[b-cqyo084ygk] {
        min-height: 100px;
    }
    
    .preview-image[b-cqyo084ygk] {
        max-height: 100px;
    }
    
    .preview-icon[b-cqyo084ygk] {
        height: 100px;
    }
    
    .actions-grid[b-cqyo084ygk] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .action-btn[b-cqyo084ygk] {
        padding: 0.75rem;
        font-size: 0.9rem;
    }
    
    .property-row[b-cqyo084ygk] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding: 0.75rem 0;
        border-bottom: 1px solid var(--border-light);
    }
    
    .property-row:last-child[b-cqyo084ygk] {
        border-bottom: none;
    }
    
    .property-label[b-cqyo084ygk] {
        min-width: auto;
        font-size: 0.85rem;
        margin-bottom: 0.25rem;
    }
    
    .property-value[b-cqyo084ygk] {
        text-align: left;
        font-size: 0.9rem;
        background: var(--bg-secondary);
        padding: 0.5rem;
        border-radius: 4px;
        word-break: break-all;
    }
}

@media (max-width: 480px) {
    .file-properties-panel.mobile[b-cqyo084ygk] {
        height: 80vh;
        border-radius: 12px 12px 0 0;
    }
    
    /* Ensure smaller mobile content can scroll properly */
    .file-properties-panel.mobile .properties-content[b-cqyo084ygk] {
        height: calc(80vh - 80px); /* Subtract header height */
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .properties-header[b-cqyo084ygk] {
        padding: 0.75rem;
    }
    
    .properties-section[b-cqyo084ygk] {
        padding: 0.75rem;
    }
    
    .file-preview[b-cqyo084ygk],
    .folder-preview[b-cqyo084ygk] {
        min-height: 80px;
    }
    
    .preview-image[b-cqyo084ygk] {
        max-height: 80px;
    }
    
    .preview-icon[b-cqyo084ygk] {
        height: 80px;
    }
    
    .file-name[b-cqyo084ygk],
    .folder-name[b-cqyo084ygk] {
        font-size: 1rem;
    }
    
    .action-btn[b-cqyo084ygk] {
        padding: 0.625rem;
        font-size: 0.85rem;
    }
}

/* Dark mode adjustments - use data-theme attribute only */
:root[data-theme="dark"] .file-properties-panel[b-cqyo084ygk] {
    background: var(--bg-dark);
    border-left-color: var(--border-dark);
    box-shadow: -2px 0 12px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .file-properties-panel.mobile[b-cqyo084ygk] {
    border-top-color: var(--border-dark);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .properties-header[b-cqyo084ygk] {
    background: var(--bg-darker);
    border-bottom-color: var(--border-dark);
}

:root[data-theme="dark"] .file-preview[b-cqyo084ygk],
:root[data-theme="dark"] .folder-preview[b-cqyo084ygk],
:root[data-theme="dark"] .preview-fallback[b-cqyo084ygk],
:root[data-theme="dark"] .preview-icon[b-cqyo084ygk] {
    background: var(--bg-darker);
}

:root[data-theme="dark"] .file-type[b-cqyo084ygk],
:root[data-theme="dark"] .folder-type[b-cqyo084ygk] {
    background: var(--bg-darker);
}

:root[data-theme="dark"] .section-title[b-cqyo084ygk] {
    border-bottom-color: var(--border-dark);
}

:root[data-theme="dark"] .property-value[b-cqyo084ygk] {
    background: var(--bg-darker);
}

/* Animations */
@keyframes slideInRight-b-cqyo084ygk {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOutRight-b-cqyo084ygk {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

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

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

/* Backdrop for mobile */
.properties-backdrop[b-cqyo084ygk] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.properties-backdrop.visible[b-cqyo084ygk] {
    opacity: 1;
    pointer-events: auto;
}

/* Panel toggle button in toolbar */
.properties-toggle[b-cqyo084ygk] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

.properties-toggle.active[b-cqyo084ygk] {
    background: var(--primary-color) !important;
    color: white !important;
}

.properties-toggle:hover[b-cqyo084ygk] {
    background: var(--bg-hover) !important;
}

.properties-toggle.active:hover[b-cqyo084ygk] {
    background: var(--primary-hover-color) !important;
}

/* Ensure panel doesn't interfere with main content */
:global(.files-container.properties-open)[b-cqyo084ygk] {
    margin-right: 350px;
}

@media (max-width: 1200px) {
    :global(.files-container.properties-open)[b-cqyo084ygk] {
        margin-right: 0;
    }
}

/* ===================================
   METADATA SECTION STYLES
   =================================== */

.metadata-grid[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.metadata-row[b-cqyo084ygk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid var(--border-light);
}

.metadata-row:last-child[b-cqyo084ygk] {
    border-bottom: none;
}

.metadata-label[b-cqyo084ygk] {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.75rem;
    flex-shrink: 0;
    min-width: 80px;
}

.metadata-value[b-cqyo084ygk] {
    color: var(--text-primary);
    font-size: 0.75rem;
    text-align: right;
    word-break: break-word;
    flex: 1;
}

.metadata-toggle[b-cqyo084ygk] {
    margin-top: 0.25rem;
    text-align: center;
}

.metadata-toggle .btn-link[b-cqyo084ygk] {
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.125rem 0.25rem;
    font-size: 0.75rem;
    border: none;
    background: none;
}

.metadata-toggle .btn-link:hover[b-cqyo084ygk] {
    color: var(--primary-hover-color);
    text-decoration: underline;
}

.metadata-loading[b-cqyo084ygk] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.no-metadata[b-cqyo084ygk] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-style: italic;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .metadata-row[b-cqyo084ygk] {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }
    
    .metadata-label[b-cqyo084ygk] {
        min-width: auto;
        color: var(--text-primary);
        font-weight: 600;
    }
    
    .metadata-value[b-cqyo084ygk] {
        text-align: left;
        margin-left: 0;
    }
}

/* ===================================
   CLOUD FEATURES STYLES
   =================================== */

/* Space Usage Styles */
.space-usage-container[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.space-stats[b-cqyo084ygk] {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
    font-size: 0.75rem;
}

.space-stat[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
}

.space-label[b-cqyo084ygk] {
    color: var(--text-secondary);
    font-size: 0.7rem;
    margin-bottom: 0.125rem;
}

.space-value[b-cqyo084ygk] {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.75rem;
}

.space-progress-container[b-cqyo084ygk] {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.space-progress-container:hover[b-cqyo084ygk] {
    opacity: 0.8;
}

.space-progress[b-cqyo084ygk] {
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.space-progress .progress-bar[b-cqyo084ygk] {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-color-hover));
    border-radius: 5px;
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    min-width: 20px;
}

/* Cache Management Styles */
.cache-management-container[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.cache-status[b-cqyo084ygk] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.cache-label[b-cqyo084ygk] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.cache-value[b-cqyo084ygk] {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.75rem;
}

.cache-expire-btn[b-cqyo084ygk] {
    min-width: 24px;
    height: 24px;
    padding: 0.125rem 0.25rem;
    margin-left: auto;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.cache-expire-btn:hover[b-cqyo084ygk] {
    background-color: var(--warning-color);
    border-color: var(--warning-color);
    color: white;
}

.cache-controls[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cache-input-group[b-cqyo084ygk] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.cache-change-label[b-cqyo084ygk] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.cache-input[b-cqyo084ygk] {
    width: 50px;
    height: 24px;
    font-size: 0.75rem;
    text-align: center;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.125rem;
}

.cache-input:focus[b-cqyo084ygk] {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--accent-color-rgb), 0.2);
}

.cache-unit[b-cqyo084ygk] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    white-space: nowrap;
}

.cache-apply-btn[b-cqyo084ygk] {
    min-width: 24px;
    height: 24px;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.cache-apply-btn:hover[b-cqyo084ygk] {
    background-color: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

/* ===================================
   PHASE 2 FEATURES STYLES
   =================================== */

/* Membership Styles */
.membership-container[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.membership-item[b-cqyo084ygk] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.375rem;
    transition: background-color 0.2s ease;
}

.membership-item:hover[b-cqyo084ygk] {
    background: var(--bg-hover);
}

.membership-header[b-cqyo084ygk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.membership-label[b-cqyo084ygk] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.membership-value[b-cqyo084ygk] {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.75rem;
}

.membership-expiry[b-cqyo084ygk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.7rem;
}

.expiry-label[b-cqyo084ygk] {
    color: var(--text-secondary);
}

.expiry-value[b-cqyo084ygk] {
    color: var(--warning-color);
    font-weight: 600;
}

/* Folder Statistics Styles */
.folder-statistics-container[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.statistics-refresh-btn[b-cqyo084ygk] {
    margin-left: auto;
    min-width: 24px;
    height: 24px;
    padding: 0.125rem 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.statistics-refresh-btn:hover:not(:disabled)[b-cqyo084ygk] {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
}

.statistics-refresh-btn:disabled[b-cqyo084ygk] {
    opacity: 0.6;
    cursor: not-allowed;
}

.statistics-grid[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.statistic-item[b-cqyo084ygk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.375rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.statistic-item:hover[b-cqyo084ygk] {
    background: var(--bg-hover);
}

.statistic-label[b-cqyo084ygk] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
}

.statistic-value[b-cqyo084ygk] {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.75rem;
    text-align: right;
}

/* Section title improvements for Phase 2 */
.section-title[b-cqyo084ygk] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--border-color);
}

/* Mobile responsive adjustments for cloud features */
@media (max-width: 768px) {
    .space-stats[b-cqyo084ygk] {
        font-size: 0.8rem;
    }
    
    .space-stat[b-cqyo084ygk] {
        gap: 0.125rem;
    }
    
    .space-label[b-cqyo084ygk],
    .space-value[b-cqyo084ygk] {
        font-size: 0.75rem;
    }
    
    .cache-input-group[b-cqyo084ygk] {
        justify-content: flex-start;
    }
    
    .cache-input[b-cqyo084ygk] {
        width: 50px;
        font-size: 0.8rem;
    }
    
    .cache-change-label[b-cqyo084ygk],
    .cache-unit[b-cqyo084ygk],
    .cache-label[b-cqyo084ygk],
    .cache-value[b-cqyo084ygk] {
        font-size: 0.8rem;
    }
    
    /* Phase 2 mobile responsive adjustments */
    .membership-header[b-cqyo084ygk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .membership-expiry[b-cqyo084ygk] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
    }
    
    .statistics-grid[b-cqyo084ygk] {
        gap: 0.375rem;
    }
    
    .statistic-item[b-cqyo084ygk] {
        padding: 0.375rem 0.5rem;
    }
    
    .statistic-label[b-cqyo084ygk],
    .statistic-value[b-cqyo084ygk] {
        font-size: 0.8rem;
    }
    
    .membership-label[b-cqyo084ygk],
    .membership-value[b-cqyo084ygk],
    .expiry-label[b-cqyo084ygk],
    .expiry-value[b-cqyo084ygk] {
        font-size: 0.8rem;
    }
    
    /* Phase 3 mobile responsive adjustments */
    .encryption-container[b-cqyo084ygk] {
        padding: 0.5rem;
    }
    
    .unlock-controls[b-cqyo084ygk],
    .lock-controls[b-cqyo084ygk] {
        gap: 0.375rem;
    }
    
    .unlock-controls .input-group .form-control[b-cqyo084ygk] {
        font-size: 0.85rem;
    }
    
    .search-navigation-container[b-cqyo084ygk] {
        padding: 0.5rem;
    }
    
    .path-container[b-cqyo084ygk] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .clipboard-actions[b-cqyo084ygk] {
        flex-direction: column;
        gap: 0.375rem;
    }
    
    .clipboard-btn[b-cqyo084ygk] {
        width: 100%;
        font-size: 0.85rem;
    }
}

/* ===================================
   PHASE 3 SPECIFIC STYLES
   =================================== */

/* File Encryption Support */
.encryption-container[b-cqyo084ygk] {
    background: rgba(var(--bs-warning-rgb), 0.1);
    border: 1px solid rgba(var(--bs-warning-rgb), 0.2);
    border-radius: 0.25rem;
    padding: 0.375rem;
    margin-top: 0.25rem;
}

.encryption-status[b-cqyo084ygk] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-bottom: 0.375rem;
}

.encryption-label[b-cqyo084ygk] {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.encryption-badge[b-cqyo084ygk] {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.125rem 0.25rem;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    gap: 0.125rem;
}

.encryption-controls[b-cqyo084ygk] {
    margin-top: 0.375rem;
}

.unlock-controls[b-cqyo084ygk],
.lock-controls[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.unlock-controls .input-group[b-cqyo084ygk] {
    margin-bottom: 0;
}

.unlock-controls .form-control[b-cqyo084ygk] {
    border-radius: 0.25rem 0 0 0.25rem;
}

.unlock-controls .btn[b-cqyo084ygk] {
    border-radius: 0 0.25rem 0.25rem 0;
    white-space: nowrap;
}

.lock-controls .btn[b-cqyo084ygk] {
    align-self: flex-start;
}

.lock-controls small[b-cqyo084ygk] {
    margin-top: 0.125rem;
    display: block;
}

/* Search Result Navigation */
.search-navigation-container[b-cqyo084ygk] {
    background: rgba(var(--bs-info-rgb), 0.1);
    border: 1px solid rgba(var(--bs-info-rgb), 0.2);
    border-radius: 0.25rem;
    padding: 0.375rem;
    margin-top: 0.25rem;
}

.original-path-display[b-cqyo084ygk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.path-label[b-cqyo084ygk] {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.path-container[b-cqyo084ygk] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.path-text[b-cqyo084ygk] {
    flex: 1;
    font-family: var(--bs-font-monospace);
    font-size: 0.7rem;
    color: var(--text-primary);
    word-break: break-all;
    line-height: 1.4;
}

.navigate-btn[b-cqyo084ygk] {
    flex-shrink: 0;
    font-size: 0.7rem;
    padding: 0.25rem 0.375rem;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.navigate-btn:hover[b-cqyo084ygk] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Copy-to-Clipboard Enhancement */
.clipboard-container[b-cqyo084ygk] {
    background: rgba(var(--bs-secondary-rgb), 0.1);
    border: 1px solid rgba(var(--bs-secondary-rgb), 0.2);
    border-radius: 0.25rem;
    padding: 0.375rem;
    margin-top: 0.25rem;
}

.clipboard-actions[b-cqyo084ygk] {
    display: flex;
    gap: 0.25rem;
}

.clipboard-btn[b-cqyo084ygk] {
    flex: 1;
    font-size: 0.75rem;
    padding: 0.25rem 0.375rem;
    transition: all 0.3s ease;
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
}

.clipboard-btn:hover[b-cqyo084ygk] {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Success feedback animation */
.clipboard-btn.btn-success[b-cqyo084ygk] {
    background: linear-gradient(135deg, var(--bs-success), #20c997);
    border-color: var(--bs-success);
    color: white;
    animation: successPulse-b-cqyo084ygk 0.3s ease;
}

@keyframes successPulse-b-cqyo084ygk {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Encryption status color variants */
.encryption-badge.bg-success[b-cqyo084ygk] {
    background: linear-gradient(135deg, var(--bs-success), #20c997) !important;
}

.encryption-badge.bg-warning[b-cqyo084ygk] {
    background: linear-gradient(135deg, var(--bs-warning), #ffb347) !important;
    color: var(--bs-dark) !important;
}

.encryption-badge.bg-secondary[b-cqyo084ygk] {
    background: linear-gradient(135deg, var(--bs-secondary), #6c757d) !important;
}

/* Promotion related styles */
.beta-badge[b-cqyo084ygk] {
    position: absolute;
    top: -2px;
    right: -6px;
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
    color: white;
    font-size: 0.65rem;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.gift[b-cqyo084ygk] {
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(135deg, #ffc107, #ffca2c);
    color: white;
    font-size: 0.65rem;
    padding: 2px 4px;
    border-radius: 3px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10;
}
.promotion-modal[b-cqyo084ygk] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    backdrop-filter: blur(2px);
}

.promotion-modal-content[b-cqyo084ygk] {
    background: white;
    border-radius: 12px;
    padding: 0;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    position: relative;
    display: flex;
    flex-direction: column;
}

.promotion-modal-close[b-cqyo084ygk] {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    z-index: 1060;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
}

.promotion-modal-close:hover[b-cqyo084ygk] {
    background-color: rgba(0, 0, 0, 0.1);
    color: #333;
}

.promotion-modal .modal-header[b-cqyo084ygk] {
    padding: 20px 20px 0 20px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

.promotion-modal .modal-header h3[b-cqyo084ygk] {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.25rem;
    font-weight: 600;
}

.promotion-modal .modal-body[b-cqyo084ygk] {
    padding: 20px;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: 90vw;
    width: 800px;
    max-height: 90vh;
}

/* Mobile Optimizations */
@media (max-width: 768px) {
    .file-properties-panel.mobile .properties-content[b-cqyo084ygk] {
        padding: 0.5rem;
    }
    
    .file-properties-panel.mobile .file-preview[b-cqyo084ygk] {
        height: 80px;
    }
    
    .file-properties-panel.mobile .properties-table .name[b-cqyo084ygk] {
        width: 35%;
        font-size: 10px;
    }
    
    .file-properties-panel.mobile .properties-table .value[b-cqyo084ygk] {
        font-size: 10px;
        max-width: 120px;
    }
    
    .file-properties-panel.mobile .actions-grid[b-cqyo084ygk] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .file-properties-panel.mobile .action-btn[b-cqyo084ygk] {
        padding: 0.5rem;
        font-size: 0.8rem;
    }
    
    .file-properties-panel.mobile .card-body[b-cqyo084ygk] {
        padding: 0.5rem;
    }
}

/* Clickable copy styling */
.clickable-copy[b-cqyo084ygk] {
    cursor: pointer;
    position: relative;
    transition: background-color 0.2s ease;
}

.clickable-copy:hover[b-cqyo084ygk] {
    background-color: var(--bs-secondary-bg);
}

.copy-icon[b-cqyo084ygk] {
    opacity: 0;
    margin-left: 8px;
    color: var(--bs-secondary);
    transition: opacity 0.2s ease;
    font-size: 0.8em;
}

.clickable-copy:hover .copy-icon[b-cqyo084ygk] {
    opacity: 1;
}

.clickable-copy .copy-icon[b-cqyo084ygk] {
    display: inline-block;
}

/* ===================================
   OVERLAY CONTEXT STYLES (PhotoSwipeViewer)
   =================================== */

/* Special styling for overlay context in PhotoSwipeViewer */
.overlay-properties .file-properties-panel[b-cqyo084ygk] {
    background: transparent;
    border: none;
    box-shadow: none;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    pointer-events: auto;
    overflow: hidden;
    z-index: 10000;
    /* Ensure all mouse events are captured */
    touch-action: manipulation;
}

.overlay-properties .properties-header[b-cqyo084ygk] {
    background: rgba(40, 44, 52, 0.9);
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-shrink: 0;
    pointer-events: auto;
    z-index: 10001;
}

.overlay-properties .properties-content[b-cqyo084ygk] {
    background: transparent;
    color: white;
    padding: 0;
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: auto;
    z-index: 10001;
}

.overlay-properties .card[b-cqyo084ygk] {
    background: rgba(40, 44, 52, 0.85);
    color: #e6e6e6;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    margin: 1rem;
    width: 100%;
    max-width: 350px;
    height: calc(100% - 2rem);
    overflow-y: auto;
    overflow-x: hidden;
    pointer-events: auto;
    z-index: 10002;
    position: relative;
    /* Optimized scrolling performance */
    touch-action: pan-y;
    overscroll-behavior: contain;
    scroll-behavior: auto; /* Use instant scrolling instead of smooth for better performance */
    -webkit-overflow-scrolling: touch;
    /* Hardware acceleration for better performance */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: scroll-position;
}

/* Custom scrollbar for overlay context */
.overlay-properties .card[b-cqyo084ygk]::-webkit-scrollbar {
    width: 8px;
}

.overlay-properties .card[b-cqyo084ygk]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
}

.overlay-properties .card[b-cqyo084ygk]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.overlay-properties .card[b-cqyo084ygk]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.overlay-properties .card-body[b-cqyo084ygk] {
    padding: 1rem;
}

.overlay-properties .properties-table[b-cqyo084ygk] {
    color: #e6e6e6;
}

.overlay-properties .properties-table .name[b-cqyo084ygk] {
    color: #b3b3b3;
    font-weight: 500;
}

.overlay-properties .properties-table .value[b-cqyo084ygk] {
    color: #e6e6e6;
    font-weight: 400;
}

.overlay-properties .clickable-copy[b-cqyo084ygk] {
    color: #e6e6e6 !important;
}

.overlay-properties .clickable-copy:hover[b-cqyo084ygk] {
    color: #4fc3f7 !important;
    background-color: rgba(79, 195, 247, 0.1) !important;
}

.overlay-properties .copy-icon[b-cqyo084ygk] {
    color: #b3b3b3 !important;
}

.overlay-properties .file-preview .preview-image[b-cqyo084ygk] {
    border: 2px solid #555555;
}

.overlay-properties .preview-icon i[b-cqyo084ygk] {
    color: #4fc3f7 !important;
}

/* Force dark preview surface inside PhotoSwipeViewer overlay (independent of system theme) */
.overlay-properties .file-preview[b-cqyo084ygk],
.overlay-properties .folder-preview[b-cqyo084ygk],
.overlay-properties .preview-fallback[b-cqyo084ygk],
.overlay-properties .preview-icon[b-cqyo084ygk] {
    background: rgba(40, 44, 52, 0.85) !important; /* match overlay card */
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.overlay-properties .text-primary[b-cqyo084ygk] {
    color: #4fc3f7 !important;
}

.overlay-properties .text-warning[b-cqyo084ygk] {
    color: #ffb74d !important;
}

.overlay-properties .progress-bar[b-cqyo084ygk] {
    background-color: #4fc3f7 !important;
}

.overlay-properties .progress[b-cqyo084ygk] {
    background-color: #333333 !important;
}

.overlay-properties .btn[b-cqyo084ygk] {
    color: #e6e6e6 !important;
    border-color: #555555 !important;
    background-color: rgba(40, 44, 52, 0.8) !important;
}

.overlay-properties .btn:hover[b-cqyo084ygk] {
    color: #4fc3f7 !important;
    background-color: rgba(79, 195, 247, 0.1) !important;
    border-color: #4fc3f7 !important;
}

.overlay-properties .properties-title[b-cqyo084ygk] {
    color: white;
}

.overlay-properties .properties-close[b-cqyo084ygk] {
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

.overlay-properties .properties-close:hover[b-cqyo084ygk] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}
/* /Components/FloatingPerformancePanel.razor.rz.scp.css */
/* Floating Performance Panel Styles */
.floating-performance-panel[b-f05d9f7vyc] {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
    z-index: 1000;
    min-width: 300px;
    max-width: 400px;
    color: white;
}

[data-theme="dark"] .floating-performance-panel[b-f05d9f7vyc] {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Panel Header */
.panel-header[b-f05d9f7vyc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px 8px 0 0;
}

.panel-title[b-f05d9f7vyc] {
    font-weight: 600;
    font-size: 0.9rem;
}

.control-btn[b-f05d9f7vyc] {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.control-btn:hover[b-f05d9f7vyc] {
    background: rgba(255, 255, 255, 0.1);
}

.close-btn i[b-f05d9f7vyc] {
    color: #ff6b6b;
}

/* Panel Content */
.panel-content[b-f05d9f7vyc] {
    padding: 12px;
}

.loading-indicator[b-f05d9f7vyc], .error-message[b-f05d9f7vyc] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #aaa;
}

.loading-indicator i[b-f05d9f7vyc] {
    margin-right: 8px;
}

.error-message i[b-f05d9f7vyc] {
    margin-right: 8px;
    color: #ff6b6b;
}

/* Metric Items */
.metric-item[b-f05d9f7vyc] {
    margin-bottom: 16px;
}

.metric-item:last-child[b-f05d9f7vyc] {
    margin-bottom: 0;
}

.metric-header[b-f05d9f7vyc] {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

.metric-icon[b-f05d9f7vyc] {
    margin-right: 8px;
    font-size: 0.9rem;
}

.cpu-icon[b-f05d9f7vyc] { color: #ff6b6b; }
.memory-icon[b-f05d9f7vyc] { color: #9c27b0; }
.network-icon[b-f05d9f7vyc] { color: #2196f3; }
.tasks-icon[b-f05d9f7vyc] { color: #ff9800; }

.metric-header span:not(.metric-value)[b-f05d9f7vyc] {
    flex: 1;
    font-weight: 500;
    font-size: 0.85rem;
}

.metric-value[b-f05d9f7vyc] {
    font-weight: 600;
    font-size: 0.8rem;
}

.metric-value.low[b-f05d9f7vyc] { color: #28a745; }
.metric-value.medium[b-f05d9f7vyc] { color: #ffc107; }
.metric-value.high[b-f05d9f7vyc] { color: #dc3545; }

/* Chart Bars */
.metric-chart[b-f05d9f7vyc] {
    margin: 4px 0;
}

.chart-bar[b-f05d9f7vyc] {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.chart-fill[b-f05d9f7vyc] {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.cpu-fill[b-f05d9f7vyc] { background: linear-gradient(90deg, #28a745, #ffc107, #dc3545); }
.memory-fill[b-f05d9f7vyc] { background: linear-gradient(90deg, #28a745, #ffc107, #dc3545); }

.metric-details[b-f05d9f7vyc] {
    font-size: 0.75rem;
    color: #aaa;
    margin-top: 4px;
}

/* Network Metrics */
.network-metrics[b-f05d9f7vyc] {
    display: flex;
    gap: 16px;
}

.network-item[b-f05d9f7vyc] {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}

.network-item i[b-f05d9f7vyc] {
    margin-right: 4px;
    font-size: 0.75rem;
}

.network-item.download i[b-f05d9f7vyc] { color: #2196f3; }
.network-item.upload i[b-f05d9f7vyc] { color: #4caf50; }

/* Task Metrics */
.task-metrics[b-f05d9f7vyc] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.task-item[b-f05d9f7vyc] {
    display: flex;
    align-items: center;
    font-size: 0.8rem;
}

.task-item i[b-f05d9f7vyc] {
    margin-right: 4px;
    font-size: 0.75rem;
}

.task-item.copy i[b-f05d9f7vyc] { color: #ff9800; }
.task-item.download i[b-f05d9f7vyc] { color: #2196f3; }
.task-item.upload i[b-f05d9f7vyc] { color: #4caf50; }

/* Responsive */
@media (max-width: 768px) {
    .floating-performance-panel[b-f05d9f7vyc] {
        min-width: 280px;
        max-width: 320px;
    }
    
    .network-metrics[b-f05d9f7vyc],
    .task-metrics[b-f05d9f7vyc] {
        flex-direction: column;
        gap: 8px;
    }
}
/* /Components/InlinePerformanceBar.razor.rz.scp.css */
/* Inline Performance Bar Styles */
.inline-performance-bar[b-1uvkei084s] {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.85);
    border-radius: 20px;
    padding: 2px 8px;
    margin: 0 8px;
    height: 30px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.inline-performance-bar:hover[b-1uvkei084s] {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.15);
}

[data-theme="dark"] .inline-performance-bar[b-1uvkei084s] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .inline-performance-bar:hover[b-1uvkei084s] {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Metrics */
.inline-metric[b-1uvkei084s] {
    display: inline-flex;
    align-items: center;
    margin: 0 5px;
    font-size: 0.75rem;
    white-space: nowrap;
    color: var(--text-color, #555555);
}

[data-theme="dark"] .inline-metric[b-1uvkei084s] {
    color: var(--text-color, #ffffff);
}

.inline-metric i[b-1uvkei084s] {
    margin-right: 3px;
    font-size: 0.7rem;
}

/* Metric colors */
.inline-metric.cpu i[b-1uvkei084s] { color: #ff6b6b; }
.inline-metric.memory i[b-1uvkei084s] { color: #9c27b0; }
.inline-metric.download i[b-1uvkei084s] { color: #2196f3; }
.inline-metric.upload i[b-1uvkei084s] { color: #4caf50; }
.inline-metric.copy-tasks i[b-1uvkei084s] { color: #ff9800; }
.inline-metric.download-tasks i[b-1uvkei084s] { color: #03a9f4; }
.inline-metric.upload-tasks i[b-1uvkei084s] { color: #8bc34a; }

/* Value coloring */
.inline-metric .low[b-1uvkei084s] { color: #28a745; }
.inline-metric .medium[b-1uvkei084s] { color: #ffc107; }
.inline-metric .high[b-1uvkei084s] { color: #dc3545; }

/* Controls */
.inline-controls[b-1uvkei084s] {
    display: flex;
    margin-left: 8px;
}

.inline-btn[b-1uvkei084s] {
    background: none;
    border: none;
    color: var(--text-color, #555555);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 0.75rem;
    opacity: 0.7;
    transition: all 0.2s ease;
}

[data-theme="dark"] .inline-btn[b-1uvkei084s] {
    color: var(--text-color, #ffffff);
}

.inline-btn:hover[b-1uvkei084s] {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
}

[data-theme="dark"] .inline-btn:hover[b-1uvkei084s] {
    background: rgba(255, 255, 255, 0.1);
}

.inline-btn.expand-btn i[b-1uvkei084s] {
    color: var(--accent-color, #2196f3);
}

.inline-btn.close-btn i[b-1uvkei084s] {
    color: #dc3545;
}

/* Loading state */
.inline-metric.loading[b-1uvkei084s] {
    color: #aaa;
    font-style: italic;
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .inline-performance-bar[b-1uvkei084s] {
        padding: 2px 5px;
        margin: 0 5px;
    }
    
    .inline-metric[b-1uvkei084s] {
        margin: 0 3px;
        font-size: 0.7rem;
    }
    
    .inline-metric.download[b-1uvkei084s],
    .inline-metric.upload[b-1uvkei084s] {
        display: none; /* Hide network metrics on smaller screens */
    }
}

/* Very narrow screens */
@media (max-width: 576px) {
    .inline-performance-bar[b-1uvkei084s] {
        padding: 2px 4px;
        margin: 0 3px;
    }
    
    .inline-metric[b-1uvkei084s] {
        margin: 0 2px;
        font-size: 0.65rem;
    }
    
    /* Only show CPU and memory on very small screens */
    .inline-metric.copy-tasks[b-1uvkei084s],
    .inline-metric.download-tasks[b-1uvkei084s],
    .inline-metric.upload-tasks[b-1uvkei084s] {
        display: none;
    }
}
/* /Components/LogViewer.razor.rz.scp.css */
/* Professional Log Viewer - Compact Debug Tool */
.log-viewer[b-jpysiji4ad] {
    display: flex;
    flex-direction: column;
    background: var(--log-bg, #0d1117);
    color: var(--log-text, #f0f6fc);
    font-family: 'Consolas', 'Monaco', 'Lucida Console', monospace;
    font-size: 12px;
    border-radius: 4px;
    border: 1px solid var(--log-border, #333);
    height: 100%;
}

/* Light theme overrides */
[data-bs-theme="light"] .log-viewer[b-jpysiji4ad] {
    --log-bg: #ffffff;
    --log-header-bg: #f8f9fa;
    --log-content-bg: #ffffff;
    --log-text: #212529;
    --log-border: #dee2e6;
    --log-border-light: #e9ecef;
    --log-muted: #6c757d;
    --log-select-bg: #ffffff;
    --log-select-border: #ced4da;
    --log-hover-bg: #f8f9fa;
    --log-scrollbar-track: #f1f3f4;
    --log-scrollbar-thumb: #c1c1c1;
    --log-scrollbar-thumb-hover: #a8a8a8;
}

/* Dark theme variables */
[data-bs-theme="dark"] .log-viewer[b-jpysiji4ad] {
    --log-bg: #0d1117;
    --log-header-bg: #1a1a1a;
    --log-content-bg: #0d1117;
    --log-text: #f0f6fc;
    --log-border: #333;
    --log-border-light: #21262d;
    --log-muted: #7d8590;
    --log-select-bg: #2a2a2a;
    --log-select-border: #444;
    --log-hover-bg: #161b22;
    --log-scrollbar-track: #161b22;
    --log-scrollbar-thumb: #484f58;
    --log-scrollbar-thumb-hover: #6e7681;
}

.log-header[b-jpysiji4ad] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--log-header-bg, #1a1a1a);
    border-bottom: 1px solid var(--log-border, #333);
    padding: 8px 12px;
    min-height: 36px;
    flex-shrink: 0;
}

.log-title[b-jpysiji4ad] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 13px;
    color: var(--log-text, #f0f6fc);
}

.log-title i[b-jpysiji4ad] {
    color: #4a9eff;
    font-size: 14px;
}

.log-count[b-jpysiji4ad] {
    color: var(--log-muted, #888);
    font-size: 11px;
    font-weight: normal;
}

.log-controls[b-jpysiji4ad] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.log-level-select[b-jpysiji4ad] {
    background: var(--log-select-bg, #2a2a2a);
    border: 1px solid var(--log-select-border, #444);
    color: var(--log-text, #f0f6fc);
    border-radius: 3px;
    padding: 4px 6px;
    font-size: 11px;
    min-width: 60px;
    /* Remove default dropdown arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Add custom dropdown arrow */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 12px 9px;
    padding-right: 20px;
}

.log-level-select:focus[b-jpysiji4ad] {
    outline: none;
    border-color: #4a9eff;
}

/* Light theme dropdown arrow */
[data-bs-theme="light"] .log-level-select[b-jpysiji4ad] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
}

.auto-scroll-toggle[b-jpysiji4ad] {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    color: var(--log-muted, #888);
    font-size: 11px;
}

.auto-scroll-toggle input[type="checkbox"][b-jpysiji4ad] {
    margin: 0;
    transform: scale(0.8);
}

.auto-scroll-toggle:hover[b-jpysiji4ad] {
    color: var(--log-text, #f0f6fc);
}

.btn-clear[b-jpysiji4ad] {
    background: #dc3545;
    border: 1px solid #dc3545;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-clear:hover[b-jpysiji4ad] {
    background: #c82333;
    border-color: #c82333;
}

.btn-export[b-jpysiji4ad] {
    background: #28a745;
    border: 1px solid #28a745;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-left: 4px;
}

.btn-export:hover[b-jpysiji4ad] {
    background: #218838;
    border-color: #218838;
}

.btn-export[b-jpysiji4ad] {
    background: #28a745;
    border: none;
    color: white;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 24px;
    transition: all 0.2s ease;
}

.btn-export:hover[b-jpysiji4ad] {
    background: #218838;
    transform: translateY(-1px);
}

.log-content[b-jpysiji4ad] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--log-content-bg, #0d1117);
    padding: 0;
    max-height: 100vh;
    position: relative;
}

.log-content[b-jpysiji4ad]::-webkit-scrollbar {
    width: 12px;
}

.log-content[b-jpysiji4ad]::-webkit-scrollbar-track {
    background: var(--log-scrollbar-track, #161b22);
    border-radius: 6px;
}

.log-content[b-jpysiji4ad]::-webkit-scrollbar-thumb {
    background: var(--log-scrollbar-thumb, #484f58);
    border-radius: 6px;
    border: 2px solid var(--log-scrollbar-track, #161b22);
}

.log-content[b-jpysiji4ad]::-webkit-scrollbar-thumb:hover {
    background: var(--log-scrollbar-thumb-hover, #6e7681);
}

/* Firefox scrollbar styling */
.log-content[b-jpysiji4ad] {
    scrollbar-width: thin;
    scrollbar-color: var(--log-scrollbar-thumb, #484f58) var(--log-scrollbar-track, #161b22);
}

.log-content[b-jpysiji4ad]::-webkit-scrollbar-thumb:hover {
    background: var(--log-scrollbar-thumb-hover, #6e7681);
}

.log-empty[b-jpysiji4ad] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 200px;
    color: var(--log-muted, #666);
    font-size: 12px;
}

.log-entry[b-jpysiji4ad] {
    border-bottom: 1px solid var(--log-border-light, #21262d);
    font-size: 11px;
    line-height: 1.3;
}

.log-entry:hover[b-jpysiji4ad] {
    background: var(--log-hover-bg, #161b22);
}

.log-line[b-jpysiji4ad] {
    display: flex;
    align-items: baseline;
    padding: 4px 12px;
    gap: 8px;
}

/* Desktop layout - show by default */
.desktop-layout[b-jpysiji4ad] {
    display: block;
}

.desktop-layout.log-line[b-jpysiji4ad] {
    display: flex;
}

.desktop-layout.log-fields[b-jpysiji4ad] {
    display: block;
}

/* Mobile layout - hide by default */
.log-mobile-layout[b-jpysiji4ad] {
    display: none;
}

.log-time[b-jpysiji4ad] {
    color: var(--log-muted, #7d8590);
    font-size: 10px;
    min-width: 72px;
    flex-shrink: 0;
}

.log-level[b-jpysiji4ad] {
    font-weight: 600;
    font-size: 10px;
    min-width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.log-target[b-jpysiji4ad] {
    color: #58a6ff;
    font-size: 10px;
    min-width: 120px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break:break-all;
    white-space: pre-wrap;
    flex-shrink: 0;
}

/* Light theme override for log target */
[data-bs-theme="light"] .log-target[b-jpysiji4ad] {
    color: #0969da;
}

.log-message[b-jpysiji4ad] {
    flex: 1;
    word-break: break-word;
    white-space: pre-wrap;
    color: var(--log-text, #f0f6fc);
}

.log-message .ansi-message[b-jpysiji4ad] {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    border: none;
    white-space: pre-wrap;
}

.log-fields[b-jpysiji4ad] {
    padding: 2px 12px 4px 92px;
    font-size: 10px;
    color: var(--log-muted, #8b949e);
}

.log-field[b-jpysiji4ad] {
    margin-right: 12px;
    white-space: nowrap;
}

.log-field[b-jpysiji4ad]::before {
    content: "• ";
    color: var(--log-border-light, #30363d);
}

/* Log Level Colors - Dark theme (default) */
.log-trace .log-level[b-jpysiji4ad] { color: #7c3aed; }
.log-debug .log-level[b-jpysiji4ad] { color: #06b6d4; }
.log-info .log-level[b-jpysiji4ad] { color: #10b981; }
.log-warn .log-level[b-jpysiji4ad] { color: #f59e0b; }
.log-error .log-level[b-jpysiji4ad] { color: #ef4444; }

/* Log Level Colors - Light theme overrides */
[data-bs-theme="light"] .log-trace .log-level[b-jpysiji4ad] { color: #8b5cf6; }
[data-bs-theme="light"] .log-debug .log-level[b-jpysiji4ad] { color: #0891b2; }
[data-bs-theme="light"] .log-info .log-level[b-jpysiji4ad] { color: #059669; }
[data-bs-theme="light"] .log-warn .log-level[b-jpysiji4ad] { color: #d97706; }
[data-bs-theme="light"] .log-error .log-level[b-jpysiji4ad] { color: #dc2626; }

/* ANSI Color Classes - Dark theme (default) */
.log-message .ansi-black[b-jpysiji4ad],
.log-message .ansi-message .ansi-black[b-jpysiji4ad] { color: #484f58 !important; }

.log-message .ansi-red[b-jpysiji4ad],
.log-message .ansi-message .ansi-red[b-jpysiji4ad] { color: #ff7b72 !important; }

.log-message .ansi-green[b-jpysiji4ad],
.log-message .ansi-message .ansi-green[b-jpysiji4ad] { color: #7ee787 !important; }

.log-message .ansi-yellow[b-jpysiji4ad],
.log-message .ansi-message .ansi-yellow[b-jpysiji4ad] { color: #f9e2af !important; }

.log-message .ansi-blue[b-jpysiji4ad],
.log-message .ansi-message .ansi-blue[b-jpysiji4ad] { color: #79c0ff !important; }

.log-message .ansi-magenta[b-jpysiji4ad],
.log-message .ansi-message .ansi-magenta[b-jpysiji4ad] { color: #d2a8ff !important; }

.log-message .ansi-cyan[b-jpysiji4ad],
.log-message .ansi-message .ansi-cyan[b-jpysiji4ad] { color: #a5f3fc !important; }

.log-message .ansi-white[b-jpysiji4ad],
.log-message .ansi-message .ansi-white[b-jpysiji4ad] { color: #f0f6fc !important; }

.log-message .ansi-bright-black[b-jpysiji4ad],
.log-message .ansi-message .ansi-bright-black[b-jpysiji4ad] { color: #6e7681 !important; }

.log-message .ansi-bright-red[b-jpysiji4ad],
.log-message .ansi-message .ansi-bright-red[b-jpysiji4ad] { color: #ffa198 !important; }

.log-message .ansi-bright-green[b-jpysiji4ad],
.log-message .ansi-message .ansi-bright-green[b-jpysiji4ad] { color: #56d364 !important; }

.log-message .ansi-bright-yellow[b-jpysiji4ad],
.log-message .ansi-message .ansi-bright-yellow[b-jpysiji4ad] { color: #e3b341 !important; }

.log-message .ansi-bright-blue[b-jpysiji4ad],
.log-message .ansi-message .ansi-bright-blue[b-jpysiji4ad] { color: #58a6ff !important; }

.log-message .ansi-bright-magenta[b-jpysiji4ad],
.log-message .ansi-message .ansi-bright-magenta[b-jpysiji4ad] { color: #bc8cff !important; }

.log-message .ansi-bright-cyan[b-jpysiji4ad],
.log-message .ansi-message .ansi-bright-cyan[b-jpysiji4ad] { color: #39d0d6 !important; }

.log-message .ansi-bright-white[b-jpysiji4ad],
.log-message .ansi-message .ansi-bright-white[b-jpysiji4ad] { color: #ffffff !important; }

/* ANSI Color Classes - Light theme overrides */
[data-bs-theme="light"] .log-message .ansi-black[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-black[b-jpysiji4ad] { color: #24292f !important; }

[data-bs-theme="light"] .log-message .ansi-red[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-red[b-jpysiji4ad] { color: #cf222e !important; }

[data-bs-theme="light"] .log-message .ansi-green[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-green[b-jpysiji4ad] { color: #116329 !important; }

[data-bs-theme="light"] .log-message .ansi-yellow[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-yellow[b-jpysiji4ad] { color: #4d2d00 !important; }

[data-bs-theme="light"] .log-message .ansi-blue[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-blue[b-jpysiji4ad] { color: #0969da !important; }

[data-bs-theme="light"] .log-message .ansi-magenta[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-magenta[b-jpysiji4ad] { color: #8250df !important; }

[data-bs-theme="light"] .log-message .ansi-cyan[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-cyan[b-jpysiji4ad] { color: #1b7c83 !important; }

[data-bs-theme="light"] .log-message .ansi-white[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-white[b-jpysiji4ad] { color: #656d76 !important; }

[data-bs-theme="light"] .log-message .ansi-bright-black[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-bright-black[b-jpysiji4ad] { color: #656d76 !important; }

[data-bs-theme="light"] .log-message .ansi-bright-red[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-bright-red[b-jpysiji4ad] { color: #a40e26 !important; }

[data-bs-theme="light"] .log-message .ansi-bright-green[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-bright-green[b-jpysiji4ad] { color: #1a7f37 !important; }

[data-bs-theme="light"] .log-message .ansi-bright-yellow[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-bright-yellow[b-jpysiji4ad] { color: #633c01 !important; }

[data-bs-theme="light"] .log-message .ansi-bright-blue[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-bright-blue[b-jpysiji4ad] { color: #0550ae !important; }

[data-bs-theme="light"] .log-message .ansi-bright-magenta[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-bright-magenta[b-jpysiji4ad] { color: #6639ba !important; }

[data-bs-theme="light"] .log-message .ansi-bright-cyan[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-bright-cyan[b-jpysiji4ad] { color: #1b7c83 !important; }

[data-bs-theme="light"] .log-message .ansi-bright-white[b-jpysiji4ad],
[data-bs-theme="light"] .log-message .ansi-message .ansi-bright-white[b-jpysiji4ad] { color: #24292f !important; }

.log-message .ansi-bold[b-jpysiji4ad],
.log-message .ansi-message .ansi-bold[b-jpysiji4ad] { font-weight: bold !important; }

.log-message .ansi-dim[b-jpysiji4ad],
.log-message .ansi-message .ansi-dim[b-jpysiji4ad] { opacity: 0.7 !important; }

.log-message .ansi-italic[b-jpysiji4ad],
.log-message .ansi-message .ansi-italic[b-jpysiji4ad] { font-style: italic !important; }

.log-message .ansi-underline[b-jpysiji4ad],
.log-message .ansi-message .ansi-underline[b-jpysiji4ad] { text-decoration: underline !important; }

/* Responsive Design */
@media (max-width: 768px) {
    .log-viewer[b-jpysiji4ad] {
        font-size: 11px;
    }
    
    .log-header[b-jpysiji4ad] {
        padding: 6px 8px;
        min-height: 32px;
    }
    
    .log-title[b-jpysiji4ad] {
        font-size: 12px;
    }
    
    .log-controls[b-jpysiji4ad] {
        gap: 6px;
    }
    
    .log-level-select[b-jpysiji4ad] {
        min-width: 50px;
        font-size: 10px;
    }
    
    /* Hide desktop layout on mobile */
    .desktop-layout[b-jpysiji4ad] {
        display: none !important;
    }
    
    /* Show mobile layout on mobile */
    .log-mobile-layout[b-jpysiji4ad] {
        display: block !important;
        padding: 6px 8px;
    }
    
    .log-mobile-header[b-jpysiji4ad] {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
        font-size: 10px;
    }
    
    .log-mobile-header .log-time[b-jpysiji4ad] {
        color: var(--log-muted, #7d8590);
        font-size: 10px;
        min-width: 60px;
        flex-shrink: 0;
    }
    
    .log-mobile-header .log-level[b-jpysiji4ad] {
        font-weight: 600;
        font-size: 10px;
        min-width: 28px;
        text-align: center;
        flex-shrink: 0;
    }
    
    .log-mobile-header .log-target[b-jpysiji4ad] {
        color: #58a6ff;
        font-size: 10px;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    /* Light theme override for mobile log target */
    [data-bs-theme="light"] .log-mobile-header .log-target[b-jpysiji4ad] {
        color: #0969da;
    }
    
    .log-mobile-message[b-jpysiji4ad] {
        padding: 2px 0;
        font-size: 11px;
        color: var(--log-text, #f0f6fc);
        word-break: break-word;
        white-space: pre-wrap;
        line-height: 1.4;
        margin-bottom: 4px;
    }
    
    .log-mobile-fields[b-jpysiji4ad] {
        padding: 2px 0;
        font-size: 9px;
        color: var(--log-muted, #8b949e);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .log-mobile-fields .log-field[b-jpysiji4ad] {
        margin-right: 0;
        white-space: nowrap;
    }
    
    .log-mobile-fields .log-field[b-jpysiji4ad]::before {
        content: "• ";
        color: var(--log-border-light, #30363d);
    }
}

/* Desktop layout - hide mobile layout by default */
.log-mobile-layout[b-jpysiji4ad] {
    display: none;
}

/* Show desktop layout by default */
.desktop-layout[b-jpysiji4ad] {
    display: flex;
}
/* /Components/OfflineDownloadManager.razor.rz.scp.css */
/* Restart Confirmation Modal */
.restart-confirm-modal[b-s1xggin9xp] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 1220; /* above files-statusbar and main modal */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}
.restart-confirm-modal.show[b-s1xggin9xp] { opacity: 1; visibility: visible; pointer-events: auto; }
.restart-confirm-modal.hidden[b-s1xggin9xp] { opacity: 0; visibility: hidden; pointer-events: none; }
.restart-confirm-modal .modal-overlay[b-s1xggin9xp] {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}
.restart-confirm-modal .confirm-dialog[b-s1xggin9xp] {
    position: relative;
    width: 90vw; max-width: 500px;
    background: var(--bs-body-bg);
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    z-index: 2;
    overflow: hidden;
}
[data-bs-theme="dark"] .restart-confirm-modal .confirm-dialog[b-s1xggin9xp] {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
}
.restart-confirm-modal .confirm-header[b-s1xggin9xp] { padding: 1.25rem 1.5rem 0; display: flex; align-items: center; justify-content: space-between; }
.restart-confirm-modal .confirm-header h5[b-s1xggin9xp] { margin: 0; font-size: 1.25rem; font-weight: 600; color: var(--bs-body-color); }
.restart-confirm-modal .confirm-header .close-btn[b-s1xggin9xp] { background: transparent; border: none; color: var(--bs-secondary); width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.restart-confirm-modal .confirm-body[b-s1xggin9xp] { padding: 1rem 1.5rem; }
.restart-confirm-modal .confirm-footer[b-s1xggin9xp] { display: flex; gap: .5rem; justify-content: flex-end; padding: 0.75rem 1.5rem 1.25rem; }
/* Clear Confirmation Modal (shares style with remove confirm) */
.clear-confirm-modal[b-s1xggin9xp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1220; /* above files-statusbar and main modal */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.clear-confirm-modal.show[b-s1xggin9xp] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.clear-confirm-modal.hidden[b-s1xggin9xp] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.clear-confirm-modal .modal-overlay[b-s1xggin9xp] {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

.clear-confirm-modal .confirm-dialog[b-s1xggin9xp] {
    position: relative;
    background: var(--bs-body-bg);
    border-radius: 12px;
    border: 1px solid var(--bs-border-color);
    width: min(92vw, 460px);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    overflow: hidden;
    z-index: 2;
}

[data-bs-theme="dark"] .clear-confirm-modal .confirm-dialog[b-s1xggin9xp] {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
}

.clear-confirm-modal .confirm-header[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.clear-confirm-modal .confirm-header h5[b-s1xggin9xp] {
    margin: 0;
    font-weight: 600;
}

.clear-confirm-modal .confirm-header .close-btn[b-s1xggin9xp] {
    background: transparent;
    border: none;
    color: var(--bs-body-color);
    width: 32px; height: 32px;
    border-radius: 6px;
}

.clear-confirm-modal .confirm-body[b-s1xggin9xp] {
    padding: 1rem;
}

.clear-confirm-modal .confirm-footer[b-s1xggin9xp] {
    display: flex; gap: .5rem; justify-content: flex-end;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--bs-border-color);
}
/* Compact Modern Offline Download Manager - Scoped Styles */

/* Main Modal Container */
.offline-manager-modal[b-s1xggin9xp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1200; /* above files-statusbar (1080) and header dropdowns (<=1100) */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    /* Add padding for mobile nav bar and safe areas */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.offline-manager-modal.show[b-s1xggin9xp] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.offline-manager-modal.hidden[b-s1xggin9xp] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Modal Overlay with Backdrop Blur */
.offline-manager-modal .modal-overlay[b-s1xggin9xp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

/* Modal Container - Crystal Clear Content */
.offline-manager-modal .modal-container[b-s1xggin9xp] {
    position: relative;
    width: 90vw;
    max-width: 1400px;
    height: 85vh;
    max-height: 900px;
    background: var(--bs-body-bg);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bs-border-color);
    z-index: 2;
    /* Ensure no blur effects are inherited */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

[data-bs-theme="dark"] .offline-manager-modal .modal-container[b-s1xggin9xp] {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Header Styles */
.offline-manager-modal .modal-header[b-s1xggin9xp] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: none;
    min-height: 85px;
    position: relative;
}

.offline-manager-modal .modal-header[b-s1xggin9xp]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.offline-manager-modal .header-left[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.offline-manager-modal .header-icon[b-s1xggin9xp] {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.offline-manager-modal .header-icon i[b-s1xggin9xp] {
    font-size: 1.5rem;
    color: white;
}

.offline-manager-modal .header-info[b-s1xggin9xp] {
    flex: 1;
    min-width: 0;
}

.offline-manager-modal .modal-title[b-s1xggin9xp] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.offline-manager-modal .cloud-account[b-s1xggin9xp] {
    font-size: 0.875rem;
    opacity: 0.9;
    font-weight: 400;
}

.offline-manager-modal .header-right[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    flex-wrap: nowrap; /* prevent wrapping to next line */
}

.offline-manager-modal .status-summary[b-s1xggin9xp] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: nowrap;
}

.offline-manager-modal .status-item[b-s1xggin9xp] {
    text-align: center;
    min-width: 60px;
}

/* Redesigned Quota Widget - Uniform Single Line Design */
.offline-manager-modal .quota-widget[b-s1xggin9xp] {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 0.375rem 0.75rem; /* slightly tighter to fit controls inline */
    min-width: 120px;
    height: 36px; /* Match close button height */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.offline-manager-modal .quota-progress-bar[b-s1xggin9xp] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: hidden;
}

.offline-manager-modal .quota-progress-fill[b-s1xggin9xp] {
    height: 100%;
    transition: width 0.5s ease-in-out, background 0.3s ease-in-out;
    border-radius: 12px;
}

.offline-manager-modal .quota-widget[b-s1xggin9xp]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    animation: shimmer-b-s1xggin9xp 3s infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes shimmer-b-s1xggin9xp {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.offline-manager-modal .quota-content[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: relative;
    z-index: 3;
}

.offline-manager-modal .quota-label[b-s1xggin9xp] {
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.offline-manager-modal .quota-values[b-s1xggin9xp] {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-weight: 600;
    white-space: nowrap;
}

.offline-manager-modal .quota-used[b-s1xggin9xp] {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

.offline-manager-modal .quota-separator[b-s1xggin9xp] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}

.offline-manager-modal .quota-total[b-s1xggin9xp] {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.offline-manager-modal .status-count[b-s1xggin9xp] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: white;
}

.offline-manager-modal .status-label[b-s1xggin9xp] {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.offline-manager-modal .close-btn[b-s1xggin9xp] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.offline-manager-modal .header-tool-btn[b-s1xggin9xp] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}
.offline-manager-modal .header-tool-btn:hover[b-s1xggin9xp] { background: rgba(255, 255, 255, 0.25); }
.offline-manager-modal .header-tool-btn i[b-s1xggin9xp] { font-size: 1rem; }

/* Make Clear button more visible on the gradient header */
.offline-manager-modal .clear-btn[b-s1xggin9xp] {
    border-color: rgba(255, 255, 255, 0.9);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
    line-height: 1; /* avoid tall button */
    display: inline-flex;
    align-items: center;
}
.offline-manager-modal .clear-btn:hover[b-s1xggin9xp] {
    background: rgba(255, 255, 255, 0.2);
}

/* Keep items in one row on smaller screens */
@media (max-width: 480px) {
    .offline-manager-modal .modal-header[b-s1xggin9xp] {
        padding: 0.6rem 0.75rem;
        min-height: 64px;
    }
    .offline-manager-modal .header-left[b-s1xggin9xp] {
        gap: 0.5rem;
    }
    .offline-manager-modal .header-right[b-s1xggin9xp] {
        gap: 0.4rem;
        flex-wrap: nowrap;
    }
    .offline-manager-modal .quota-widget[b-s1xggin9xp] {
        min-width: 100px;
        height: 28px;
        padding: 0.2rem 0.4rem;
    }
    .offline-manager-modal .quota-label[b-s1xggin9xp] {
        display: none; /* save space on mobile */
    }
    .offline-manager-modal .quota-used[b-s1xggin9xp],
    .offline-manager-modal .quota-total[b-s1xggin9xp],
    .offline-manager-modal .quota-separator[b-s1xggin9xp] {
        font-size: 0.85rem;
    }
    .offline-manager-modal .clear-btn[b-s1xggin9xp] {
        padding: 0.2rem 0.35rem;
        height: 28px;
        font-size: 0.8rem;
    }
    .offline-manager-modal .clear-btn .btn-text[b-s1xggin9xp] { display: none; }
    .offline-manager-modal .btn-group > .btn + .dropdown-toggle[b-s1xggin9xp] {
        padding-left: 0.3rem;
    }
    .offline-manager-modal .close-btn[b-s1xggin9xp] {
        width: 28px;
        height: 28px;
    }
    .offline-manager-modal .header-tool-btn[b-s1xggin9xp] {
        width: 28px;
        height: 28px;
    }
}

.offline-manager-modal .close-btn:hover[b-s1xggin9xp] {
    background: rgba(255, 255, 255, 0.25);
}

.offline-manager-modal .close-btn i[b-s1xggin9xp] {
    font-size: 1rem;
}

/* Content Area */
.offline-manager-modal .modal-content[b-s1xggin9xp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .offline-manager-modal .modal-content[b-s1xggin9xp] {
    background: var(--bs-gray-900);
}

/* State Containers */
.offline-manager-modal .state-container[b-s1xggin9xp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    text-align: center;
}

.offline-manager-modal .state-icon[b-s1xggin9xp] {
    margin-bottom: 1.5rem;
}

.offline-manager-modal .state-icon i[b-s1xggin9xp] {
    font-size: 3rem;
    color: var(--bs-secondary);
    opacity: 0.6;
}

.offline-manager-modal .loading-state .state-icon i[b-s1xggin9xp] {
    color: #667eea;
    opacity: 1;
}

.offline-manager-modal .error-state .state-icon i[b-s1xggin9xp] {
    color: var(--bs-danger);
    opacity: 1;
}

.offline-manager-modal .state-container h5[b-s1xggin9xp] {
    color: var(--bs-body-color);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.offline-manager-modal .state-container p[b-s1xggin9xp] {
    color: var(--bs-secondary);
    margin-bottom: 1.5rem;
    max-width: 400px;
    line-height: 1.5;
}

/* Action Bar */
.offline-manager-modal .action-bar[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem; /* Reduced from 1rem 1.5rem to save vertical space */
    background: var(--bs-gray-50);
    border-bottom: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    gap: 1rem;
}

[data-bs-theme="dark"] .offline-manager-modal .action-bar[b-s1xggin9xp] {
    background: var(--bs-gray-800);
    border-bottom-color: var(--bs-gray-700);
}

.offline-manager-modal .action-group[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.offline-manager-modal .action-group .btn[b-s1xggin9xp] {
    font-size: 0.875rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
}

.offline-manager-modal .action-group .btn:hover[b-s1xggin9xp] {
    transform: translateY(-1px);
}

.offline-manager-modal .action-group .btn i[b-s1xggin9xp] {
    font-size: 0.875rem;
}

.offline-manager-modal .btn-text[b-s1xggin9xp] {
    display: inline;
}

.offline-manager-modal .selection-info[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.offline-manager-modal .selection-count[b-s1xggin9xp] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    border: 1px solid var(--bs-primary-border-subtle);
}

.offline-manager-modal .pagination-compact[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.offline-manager-modal .page-btn[b-s1xggin9xp] {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
}

[data-bs-theme="dark"] .offline-manager-modal .page-btn[b-s1xggin9xp] {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
    color: var(--bs-light);
}

.offline-manager-modal .page-btn:hover:not(:disabled)[b-s1xggin9xp] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
    transform: translateY(-1px);
}

.offline-manager-modal .page-btn:disabled[b-s1xggin9xp] {
    opacity: 0.5;
    cursor: not-allowed;
}

.offline-manager-modal .page-info[b-s1xggin9xp] {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    font-weight: 500;
    padding: 0 0.5rem;
}

/* Files Container */
.offline-manager-modal .files-container[b-s1xggin9xp] {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.offline-manager-modal .files-header[b-s1xggin9xp] {
    display: grid;
    grid-template-columns: 50px 1fr 100px 140px 110px 100px 140px;
    gap: 1rem;
    padding: 0.625rem 1.5rem; /* Match the row padding for consistency */
    background: var(--bs-gray-50);
    border-bottom: 1px solid var(--bs-border-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--bs-secondary);
    flex-shrink: 0;
}

[data-bs-theme="dark"] .offline-manager-modal .files-header[b-s1xggin9xp] {
    background: var(--bs-gray-800);
    border-bottom-color: var(--bs-gray-700);
}

.offline-manager-modal .header-cell[b-s1xggin9xp] {
    display: flex;
    align-items: center;
}

.offline-manager-modal .select-cell[b-s1xggin9xp] {
    justify-content: center;
}

.offline-manager-modal .files-body[b-s1xggin9xp] {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.offline-manager-modal .file-row[b-s1xggin9xp] {
    display: grid;
    grid-template-columns: 50px 1fr 100px 140px 110px 100px 140px;
    gap: 1rem;
    padding: 0.625rem 1.5rem; /* Reduced from 0.875rem for more compact rows */
    border-bottom: 1px solid var(--bs-border-color);
    transition: all 0.15s ease;
    align-items: center;
    background: var(--bs-body-bg);
    font-size: 0.75rem; /* Match header font size */
}

[data-bs-theme="dark"] .offline-manager-modal .file-row[b-s1xggin9xp] {
    background: var(--bs-gray-900);
    border-bottom-color: var(--bs-gray-700);
}

.offline-manager-modal .file-row:hover[b-s1xggin9xp] {
    background: var(--bs-primary-bg-subtle);
    border-bottom-color: var(--bs-primary-border-subtle);
}

.offline-manager-modal .file-row.selected[b-s1xggin9xp] {
    background: var(--bs-primary-bg-subtle);
    border-color: var(--bs-primary-border-subtle);
    box-shadow: inset 3px 0 0 var(--bs-primary);
}

.offline-manager-modal .file-cell[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.offline-manager-modal .file-cell.select-cell[b-s1xggin9xp] {
    justify-content: center;
}

.offline-manager-modal .file-cell.select-cell input[type="checkbox"][b-s1xggin9xp] {
    width: 16px; /* Reduced from 18px to match smaller font */
    height: 16px; /* Reduced from 18px to match smaller font */
    border-radius: 4px;
    border: 2px solid var(--bs-border-color);
    cursor: pointer;
}

/* Header checkbox should match the body checkbox size */
.offline-manager-modal .header-cell.select-cell input[type="checkbox"][b-s1xggin9xp] {
    width: 16px;
    height: 16px;
    border-radius: 4px;
    border: 2px solid var(--bs-border-color);
    cursor: pointer;
}

.offline-manager-modal .file-cell.select-cell input[type="checkbox"]:checked[b-s1xggin9xp] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Indeterminate state styling for select all checkbox */
.offline-manager-modal .header-cell.select-cell input[type="checkbox"].indeterminate[b-s1xggin9xp] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.7;
}

.offline-manager-modal .file-info[b-s1xggin9xp] {
    display: flex;
    align-items: flex-start; /* allow multi-line names to align from the top */
    gap: 0.75rem;
    min-width: 0;
}

.offline-manager-modal .file-info i[b-s1xggin9xp] {
    color: var(--bs-secondary);
    font-size: 1.125rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.offline-manager-modal .file-name[b-s1xggin9xp] {
    font-weight: 600;
    color: var(--bs-body-color);
    font-size: 0.75rem; /* Match header font size */
    /* allow wrapping instead of truncation */
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    flex: 1;
    min-width: 0;
}

/* Hide mobile-specific elements on desktop */
.offline-manager-modal .file-size-mobile[b-s1xggin9xp] {
    display: none;
}

.offline-manager-modal .file-details[b-s1xggin9xp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

/* Desktop: Show grid layout, hide mobile layout */
.offline-manager-modal .file-mobile-layout[b-s1xggin9xp],
.offline-manager-modal .file-row-main[b-s1xggin9xp],
.offline-manager-modal .file-row-details[b-s1xggin9xp] {
    display: none; /* Hide mobile structure by default (desktop) */
}

/* On desktop, show normal grid layout */
@media (min-width: 769px) {
    .offline-manager-modal .file-details[b-s1xggin9xp] {
        display: block;
    }
    
    .offline-manager-modal .file-name[b-s1xggin9xp] {
        margin-bottom: 0;
    }
    
    /* Keep mobile structure hidden on desktop */
    .offline-manager-modal .file-row-main[b-s1xggin9xp],
    .offline-manager-modal .file-row-details[b-s1xggin9xp] {
        display: none;
    }
}

.offline-manager-modal .file-size[b-s1xggin9xp] {
    font-size: 0.75rem; /* Match header font size */
    font-weight: 500;
    color: var(--bs-secondary);
}

/* Status Badges */
.offline-manager-modal .status-badge[b-s1xggin9xp] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid;
    transition: all 0.2s ease;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.offline-manager-modal .status-badge i[b-s1xggin9xp] {
    font-size: 0.7rem;
    flex-shrink: 0;
}

.offline-manager-modal .status-init[b-s1xggin9xp] {
    background: #fff3cd;
    color: #664d03;
    border-color: #ffecb5;
}

.offline-manager-modal .status-downloading[b-s1xggin9xp] {
    background: #cfe2ff;
    color: #084298;
    border-color: #b6d4fe;
}

.offline-manager-modal .status-finished[b-s1xggin9xp] {
    background: #d1e7dd;
    color: #0f5132;
    border-color: #badbcc;
}

.offline-manager-modal .status-error[b-s1xggin9xp] {
    background: #f8d7da;
    color: #721c24;
    border-color: #f5c2c7;
}

.offline-manager-modal .status-unknown[b-s1xggin9xp] {
    background: #e2e3e5;
    color: #41464b;
    border-color: #c4c8cb;
}

[data-bs-theme="dark"] .offline-manager-modal .status-init[b-s1xggin9xp] {
    background: #664d03;
    color: #fff3cd;
    border-color: #664d03;
}

[data-bs-theme="dark"] .offline-manager-modal .status-downloading[b-s1xggin9xp] {
    background: #084298;
    color: #cfe2ff;
    border-color: #084298;
}

[data-bs-theme="dark"] .offline-manager-modal .status-finished[b-s1xggin9xp] {
    background: #0f5132;
    color: #d1e7dd;
    border-color: #0f5132;
}

[data-bs-theme="dark"] .offline-manager-modal .status-error[b-s1xggin9xp] {
    background: #721c24;
    color: #f8d7da;
    border-color: #721c24;
}

[data-bs-theme="dark"] .offline-manager-modal .status-unknown[b-s1xggin9xp] {
    background: #41464b;
    color: #e2e3e5;
    border-color: #41464b;
}

/* Progress Elements */
.offline-manager-modal .progress-wrapper[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.offline-manager-modal .progress-bar[b-s1xggin9xp] {
    flex: 1;
    height: 8px;
    background: var(--bs-gray-200);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

[data-bs-theme="dark"] .offline-manager-modal .progress-bar[b-s1xggin9xp] {
    background: var(--bs-gray-700);
}

.offline-manager-modal .progress-fill[b-s1xggin9xp] {
    height: 100%;
    background: var(--bs-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.offline-manager-modal .progress-text[b-s1xggin9xp] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--bs-secondary);
    min-width: 35px;
    text-align: right;
}

.offline-manager-modal .progress-complete[b-s1xggin9xp] {
    font-size: 0.75rem; /* Match header font size */
    font-weight: 600;
    color: var(--bs-success);
}

.offline-manager-modal .progress-none[b-s1xggin9xp] {
    color: var(--bs-secondary);
    font-size: 0.75rem; /* Match header font size */
}

.offline-manager-modal .file-date[b-s1xggin9xp] {
    font-size: 0.75rem; /* Match header font size */
    color: var(--bs-secondary);
    font-weight: 500;
}

/* Action Buttons */
.offline-manager-modal .action-buttons[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.offline-manager-modal .action-btn[b-s1xggin9xp] {
    background: transparent;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

[data-bs-theme="dark"] .offline-manager-modal .action-btn[b-s1xggin9xp] {
    border-color: var(--bs-gray-700);
    color: var(--bs-gray-400);
}

.offline-manager-modal .action-btn:hover[b-s1xggin9xp] {
    transform: translateY(-1px);
}

.offline-manager-modal .remove-btn:hover[b-s1xggin9xp] {
    background: var(--bs-warning);
    border-color: var(--bs-warning);
    color: white;
}

.offline-manager-modal .copy-btn:hover[b-s1xggin9xp] {
    background: var(--bs-info);
    border-color: var(--bs-info);
    color: white;
}

.offline-manager-modal .delete-btn:hover[b-s1xggin9xp] {
    background: var(--bs-danger);
    border-color: var(--bs-danger);
    color: white;
}

/* Modal Footer */
.offline-manager-modal .modal-footer[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem; /* Reduced from 1rem 1.5rem */
    background: var(--bs-gray-50);
    border-top: 1px solid var(--bs-border-color);
    flex-shrink: 0;
    gap: 1rem;
    /* Ensure footer is always visible */
    min-height: 48px; /* Reduced from 60px */
    position: relative;
    z-index: 100;
}

[data-bs-theme="dark"] .offline-manager-modal .modal-footer[b-s1xggin9xp] {
    background: var(--bs-gray-800);
    border-top-color: var(--bs-gray-700);
}

.offline-manager-modal .pagination-info[b-s1xggin9xp] {
    font-size: 0.875rem;
    color: var(--bs-secondary);
    font-weight: 500;
}

.offline-manager-modal .pagination-controls[b-s1xggin9xp] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.offline-manager-modal .page-number[b-s1xggin9xp] {
    min-width: 36px;
    font-weight: 600;
}

.offline-manager-modal .page-number.active[b-s1xggin9xp] {
    background: var(--bs-primary);
    border-color: var(--bs-primary);
    color: white;
}

/* Scrollbar Styling */
.offline-manager-modal .files-body[b-s1xggin9xp]::-webkit-scrollbar {
    width: 8px;
}

.offline-manager-modal .files-body[b-s1xggin9xp]::-webkit-scrollbar-track {
    background: var(--bs-gray-100);
}

[data-bs-theme="dark"] .offline-manager-modal .files-body[b-s1xggin9xp]::-webkit-scrollbar-track {
    background: var(--bs-gray-800);
}

.offline-manager-modal .files-body[b-s1xggin9xp]::-webkit-scrollbar-thumb {
    background: var(--bs-gray-400);
    border-radius: 4px;
}

[data-bs-theme="dark"] .offline-manager-modal .files-body[b-s1xggin9xp]::-webkit-scrollbar-thumb {
    background: var(--bs-gray-600);
}

.offline-manager-modal .files-body[b-s1xggin9xp]::-webkit-scrollbar-thumb:hover {
    background: var(--bs-primary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .offline-manager-modal .modal-container[b-s1xggin9xp] {
        width: 95vw;
        height: 90vh;
    }

    .offline-manager-modal .files-header[b-s1xggin9xp],
    .offline-manager-modal .file-row[b-s1xggin9xp] {
        grid-template-columns: 40px 1fr 80px 120px 100px 80px 120px;
        gap: 0.75rem;
        padding: 0.5rem 1rem; /* More compact for medium screens */
    }
    
    /* Compact status badges on medium screens */
    .offline-manager-modal .status-badge[b-s1xggin9xp] {
        padding: 0.25rem 0.4rem;
        font-size: 0.65rem;
        gap: 0.25rem;
    }
}

@media (max-width: 992px) {
    .offline-manager-modal .header-right .status-summary[b-s1xggin9xp] {
        gap: 1rem;
    }

    .offline-manager-modal .status-count[b-s1xggin9xp] {
        font-size: 1.25rem;
    }

    .offline-manager-modal .btn-text[b-s1xggin9xp] {
        display: none;
    }

    .offline-manager-modal .action-group .btn[b-s1xggin9xp] {
        padding: 0.5rem;
        min-width: 40px;
        justify-content: center;
    }

    .offline-manager-modal .files-header[b-s1xggin9xp],
    .offline-manager-modal .file-row[b-s1xggin9xp] {
        grid-template-columns: 40px 1fr 70px 110px 90px 70px 100px;
        gap: 0.5rem;
        padding: 0.5rem; /* More compact for smaller screens */
    }

    .offline-manager-modal .status-badge .status-text[b-s1xggin9xp] {
        display: none;
    }

    .offline-manager-modal .status-badge[b-s1xggin9xp] {
        padding: 0.375rem;
        gap: 0;
        justify-content: center;
        min-width: 32px;
    }
}

@media (max-width: 768px) {
    .offline-manager-modal[b-s1xggin9xp] {
        align-items: flex-start; /* Position modal at top instead of center */
        padding-top: 0; /* Remove all top padding for absolute maximum space on all mobile devices */
    }

    .offline-manager-modal .modal-container[b-s1xggin9xp] {
        width: 100vw;
        height: 100vh; /* Full viewport height - truly full screen */
        top: 0; /* Start at absolute top */
        margin: 0;
        border-radius: 0;
        max-height: none;
        /* Remove all padding and safe area considerations for full screen */
        padding: 0;
        box-sizing: border-box;
        /* Remove extra margins to prevent cutoff */
        margin-bottom: 0;
        /* Ensure space for footer */
        min-height: 450px; /* Increased minimum height to ensure footer visibility */
    }

    .offline-manager-modal .modal-header[b-s1xggin9xp] {
        padding: 0.5rem 0.75rem;
        min-height: 40px; /* Significantly reduced from 60px */
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .offline-manager-modal .header-left[b-s1xggin9xp] {
        flex: 1;
        min-width: 0;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .offline-manager-modal .header-icon[b-s1xggin9xp] {
        width: 24px; /* Reduced from 36px */
        height: 24px; /* Reduced from 36px */
        flex-shrink: 0;
    }

    .offline-manager-modal .header-icon i[b-s1xggin9xp] {
        font-size: 0.875rem; /* Reduced from 1.125rem */
    }

    .offline-manager-modal .header-info[b-s1xggin9xp] {
        min-width: 0;
        flex: 1;
    }

    .offline-manager-modal .modal-title[b-s1xggin9xp] {
        font-size: 0.875rem; /* Reduced from 1rem */
        margin-bottom: 0;
        line-height: 1.2;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .offline-manager-modal .cloud-account[b-s1xggin9xp] {
        display: none; /* Hide cloud account info on mobile to save space */
    }

    .offline-manager-modal .header-right[b-s1xggin9xp] {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 0.375rem; /* Reduced gap */
    }

    /* Keep quota + clear controls on a single line */
    .offline-manager-modal .status-summary[b-s1xggin9xp] {
        display: inline-flex; /* was block causing a second row */
        align-items: center;
        gap: 0.375rem;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    
    .offline-manager-modal .quota-widget[b-s1xggin9xp] {
        min-width: 0;
        padding: 0.125rem 0.5rem; /* Adjusted to match 24px close button height */
        height: 24px; /* Match mobile close button height */
        border-radius: 6px;
        backdrop-filter: blur(5px);
        box-sizing: border-box;
    }
    
    .offline-manager-modal .quota-progress-bar[b-s1xggin9xp] {
        border-radius: 6px;
    }
    
    .offline-manager-modal .quota-progress-fill[b-s1xggin9xp] {
        border-radius: 6px;
    }
    
    .offline-manager-modal .quota-content[b-s1xggin9xp] {
        gap: 0.5rem; /* Slightly tighter gap on mobile */
    }
    
    .offline-manager-modal .quota-label[b-s1xggin9xp] {
        font-size: 0.625rem; /* Smaller label on mobile */
    }
    
    .offline-manager-modal .quota-used[b-s1xggin9xp],
    .offline-manager-modal .quota-separator[b-s1xggin9xp],
    .offline-manager-modal .quota-total[b-s1xggin9xp] {
        font-size: 0.75rem; /* Compact text */
        line-height: 1;
        margin: 0;
    }

    .offline-manager-modal .quota-used[b-s1xggin9xp] {
        font-weight: 600;
        color: white;
    }

    .offline-manager-modal .quota-separator[b-s1xggin9xp] {
        color: rgba(255, 255, 255, 0.7);
    }

    .offline-manager-modal .quota-total[b-s1xggin9xp] {
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
    }

    .offline-manager-modal .close-btn[b-s1xggin9xp] {
        width: 24px; /* Reduced from 32px */
        height: 24px; /* Reduced from 32px */
        padding: 0;
        border-radius: 4px;
    }

    .offline-manager-modal .close-btn i[b-s1xggin9xp] {
        font-size: 0.75rem; /* Smaller close icon */
    }

    /* Maximize content area for file list */
    .offline-manager-modal .modal-content[b-s1xggin9xp] {
        padding: 0; /* Remove any content padding */
    }

    /* Compact Action Bar */
    .offline-manager-modal .action-bar[b-s1xggin9xp] {
        padding: 0.25rem 0.5rem; /* Further reduced */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.375rem; /* Tighter gap */
        min-height: 36px; /* Reduced from 42px */
        border-bottom: 1px solid var(--bs-border-color-translucent);
    }

    .offline-manager-modal .action-group[b-s1xggin9xp] {
        flex: 1;
        justify-content: flex-start;
        gap: 0.25rem;
    }

    .offline-manager-modal .action-group .btn[b-s1xggin9xp] {
        font-size: 0.75rem;
        padding: 0.3125rem 0.5rem; /* Slightly tighter */
        min-width: auto;
        height: 30px; /* Reduced from 32px */
    }

    .offline-manager-modal .action-group .btn i[b-s1xggin9xp] {
        font-size: 0.75rem;
    }

    .offline-manager-modal .btn-text[b-s1xggin9xp] {
        display: none; /* Hide text on mobile */
    }

    .offline-manager-modal .selection-info[b-s1xggin9xp] {
        flex-shrink: 0;
        gap: 0.5rem;
    }

    .offline-manager-modal .selection-count[b-s1xggin9xp] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .offline-manager-modal .pagination-compact[b-s1xggin9xp] {
        gap: 0.25rem;
    }

    .offline-manager-modal .page-btn[b-s1xggin9xp] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }

    .offline-manager-modal .page-info[b-s1xggin9xp] {
        font-size: 0.75rem;
        padding: 0 0.25rem;
    }

    /* Mobile: Compact List Layout */
    .offline-manager-modal .files-header[b-s1xggin9xp] {
        display: none;
    }

    /* Hide desktop grid cells on mobile */
    .offline-manager-modal .file-row > .file-cell[b-s1xggin9xp] {
        display: none !important;
    }

    /* Show mobile layout on mobile */
    .offline-manager-modal .file-mobile-layout[b-s1xggin9xp] {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    .offline-manager-modal .file-row-main[b-s1xggin9xp],
    .offline-manager-modal .file-row-details[b-s1xggin9xp] {
        display: flex !important;
        width: 100%;
        box-sizing: border-box;
    }

    /* Let the list fill available space between action bar and footer */
    .offline-manager-modal .modal-content[b-s1xggin9xp],
    .offline-manager-modal .files-container[b-s1xggin9xp] {
        min-height: 0; /* Important for flex overflow children to size correctly */
    }

    .offline-manager-modal .files-body[b-s1xggin9xp] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 0;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
        max-height: none; /* Avoid viewport-based caps that create gaps */
        -webkit-overflow-scrolling: touch;
    }

    .offline-manager-modal .file-row[b-s1xggin9xp] {
        display: flex;
        flex-direction: column;
        background: var(--bs-body-bg);
        border: none;
        border-bottom: 1px solid var(--bs-border-color);
        margin: 0;
        padding: 0.75rem;
        width: 100%;
        box-sizing: border-box;
        gap: 0.5rem;
    }

    [data-bs-theme="dark"] .offline-manager-modal .file-row[b-s1xggin9xp] {
        background: var(--bs-gray-900);
        border-bottom-color: var(--bs-gray-700);
        box-shadow: none;
    }

    .offline-manager-modal .file-row.selected[b-s1xggin9xp] {
        border-left: 3px solid var(--bs-primary);
        background: var(--bs-primary-bg-subtle);
    }

    .offline-manager-modal .file-row:last-child[b-s1xggin9xp] {
        border-bottom: none;
    }

    /* First Row: Checkbox + File Name + Action Buttons */
    .offline-manager-modal .file-row-main[b-s1xggin9xp] {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 0.75rem;
    }

    /* Second Row: Size + Status + Progress + Date */
    .offline-manager-modal .file-row-details[b-s1xggin9xp] {
        display: flex;
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-left: 42px; /* Align with filename after checkbox */
    }

    /* Checkbox */
    .offline-manager-modal .file-row-main .file-cell.select-cell[b-s1xggin9xp] {
        flex-shrink: 0;
        width: auto;
    }

    .offline-manager-modal .file-row-main .file-cell.select-cell input[type="checkbox"][b-s1xggin9xp] {
        width: 18px;
        height: 18px;
    }

    /* File Name - Takes remaining space */
    .offline-manager-modal .file-row-main .file-cell.name-cell[b-s1xggin9xp] {
        flex: 1;
        min-width: 0;
        margin-right: 0.5rem;
    }

    .offline-manager-modal .file-row-main .file-cell.name-cell .file-info[b-s1xggin9xp] {
    display: flex;
    align-items: flex-start; /* align icon with first line of wrapped text */
        gap: 0.5rem;
        min-width: 0;
    }

    .offline-manager-modal .file-row-main .file-cell.name-cell .file-info i[b-s1xggin9xp] {
        flex-shrink: 0;
        width: 18px;
        text-align: center;
    }

    .offline-manager-modal .file-row-main .file-cell.name-cell .file-name[b-s1xggin9xp] {
    font-size: 0.9rem;
    font-weight: 600;
    /* allow wrapping on mobile as well */
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
        flex: 1;
        min-width: 0;
    }

    /* Action Buttons - Right aligned */
    .offline-manager-modal .file-row-main .file-cell.actions-cell[b-s1xggin9xp] {
        flex-shrink: 0;
    }

    .offline-manager-modal .file-row-main .file-cell.actions-cell .action-buttons[b-s1xggin9xp] {
        display: flex;
        gap: 0.25rem;
    }

    .offline-manager-modal .file-row-main .file-cell.actions-cell .action-btn[b-s1xggin9xp] {
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 4px;
        border: 1px solid var(--bs-border-color);
        background: var(--bs-body-bg);
        color: var(--bs-body-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem;
    }

    /* Second row items - all left aligned */
    .offline-manager-modal .file-row-details .file-cell[b-s1xggin9xp] {
        flex-shrink: 0;
    }

    .offline-manager-modal .file-row-details .file-size[b-s1xggin9xp] {
        font-size: 0.75rem;
        color: var(--bs-secondary);
    }

    .offline-manager-modal .file-row-details .status-badge[b-s1xggin9xp] {
        padding: 0.125rem 0.375rem;
        font-size: 0.625rem;
        border-radius: 10px;
        gap: 0.25rem;
        white-space: nowrap;
    }

    .offline-manager-modal .file-row-details .status-badge i[b-s1xggin9xp] {
        font-size: 0.625rem;
    }

    .offline-manager-modal .file-row-details .status-text[b-s1xggin9xp] {
        display: none;
    }

    .offline-manager-modal .file-row-details .progress-wrapper[b-s1xggin9xp] {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .offline-manager-modal .file-row-details .progress-bar[b-s1xggin9xp] {
        height: 6px;
        width: 60px;
    }

    .offline-manager-modal .file-row-details .progress-text[b-s1xggin9xp] {
        font-size: 0.625rem;
        min-width: 30px;
        text-align: right;
    }

    .offline-manager-modal .file-row-details .progress-complete[b-s1xggin9xp],
    .offline-manager-modal .file-row-details .progress-none[b-s1xggin9xp] {
        font-size: 0.625rem;
    }

    .offline-manager-modal .file-row-details .file-date[b-s1xggin9xp] {
        font-size: 0.75rem;
        color: var(--bs-secondary);
    }

    /* Compact Footer */
    .offline-manager-modal .modal-footer[b-s1xggin9xp] {
        padding: 0.375rem; /* Reduced from 0.5rem */
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
        min-height: 44px; /* Reduced from 50px */
        border-top: 1px solid var(--bs-border-color);
        background: var(--bs-gray-50);
        flex-shrink: 0;
        margin: 0;
    }

    [data-bs-theme="dark"] .offline-manager-modal .modal-footer[b-s1xggin9xp] {
        background: var(--bs-gray-800);
    }

    .offline-manager-modal .pagination-info[b-s1xggin9xp] {
        font-size: 0.75rem;
        flex: 1;
        min-width: 0;
    }

    .offline-manager-modal .pagination-controls[b-s1xggin9xp] {
        gap: 0.25rem;
        flex-shrink: 0;
    }

    .offline-manager-modal .page-btn[b-s1xggin9xp] {
        width: 30px; /* Reduced from 32px */
        height: 30px; /* Reduced from 32px */
        font-size: 0.75rem;
    }

    .offline-manager-modal .page-number[b-s1xggin9xp] {
        min-width: 32px;
    }

    /* Ensure the file name aligns vertically with the icon and has no extra bottom margin */
    .offline-manager-modal .file-row-main .file-cell.name-cell .file-info[b-s1xggin9xp] {
        align-items: center;
    }
    .offline-manager-modal .file-row-main .file-cell.name-cell .file-name[b-s1xggin9xp] {
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    /* iPhone specific optimizations */
    .offline-manager-modal .modal-container[b-s1xggin9xp] {
        width: 100vw;
        height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 140px); /* More conservative height for small screens */
        top: calc(env(safe-area-inset-top, 0) + 50px);
        border-radius: 0;
        /* Ensure minimum usable height on small screens with footer space */
        min-height: 400px;
        margin-bottom: 0; /* Remove margin to prevent cutoff */
    }

    .offline-manager-modal .modal-header[b-s1xggin9xp] {
        padding: 0.375rem 0.5rem; /* Even more compact padding */
        min-height: 32px; /* Ultra-compact height */
        gap: 0.375rem;
    }

    .offline-manager-modal .header-icon[b-s1xggin9xp] {
        width: 20px; /* Even smaller icon */
        height: 20px;
    }

    .offline-manager-modal .header-icon i[b-s1xggin9xp] {
        font-size: 0.75rem;
    }

    .offline-manager-modal .modal-title[b-s1xggin9xp] {
        font-size: 0.75rem; /* Smaller title */
        font-weight: 600;
    }

    .offline-manager-modal .close-btn[b-s1xggin9xp] {
        width: 20px; /* Ultra-compact close button */
        height: 20px;
    }

    .offline-manager-modal .close-btn i[b-s1xggin9xp] {
        font-size: 0.625rem;
    }
    
    /* Ultra-compact quota for very small screens - same design pattern */
    .offline-manager-modal .quota-widget[b-s1xggin9xp] {
        padding: 0.1875rem 0.375rem; /* Adjusted to match 28px close button height */
        height: 28px; /* Match small screen close button height */
        border-radius: 4px;
        box-sizing: border-box;
    }
    
    .offline-manager-modal .quota-progress-bar[b-s1xggin9xp] {
        border-radius: 4px;
    }
    
    .offline-manager-modal .quota-progress-fill[b-s1xggin9xp] {
        border-radius: 4px;
    }
    
    .offline-manager-modal .quota-content[b-s1xggin9xp] {
        gap: 0.25rem; /* Tighter gap for very small screens */
    }
    
    .offline-manager-modal .quota-label[b-s1xggin9xp] {
        font-size: 0.5rem; /* Even smaller label */
    }
    
    .offline-manager-modal .quota-used[b-s1xggin9xp],
    .offline-manager-modal .quota-separator[b-s1xggin9xp],
    .offline-manager-modal .quota-total[b-s1xggin9xp] {
        font-size: 0.625rem; /* Slightly larger for readability */
    }

    /* Ultra-compact action bar for small screens */
    .offline-manager-modal .action-bar[b-s1xggin9xp] {
        padding: 0.25rem 0.375rem; /* Minimal padding */
        min-height: 32px; /* Reduced from 36px */
        gap: 0.25rem; /* Tight gaps */
    }

    .offline-manager-modal .action-group[b-s1xggin9xp] {
        gap: 0.1875rem; /* Tighter button spacing */
    }

    .offline-manager-modal .btn-sm[b-s1xggin9xp] {
        padding: 0.25rem 0.375rem; /* Smaller buttons */
        font-size: 0.75rem;
    }

    .offline-manager-modal .btn-text[b-s1xggin9xp] {
        display: none; /* Hide button text, show only icons */
    }

    .offline-manager-modal .header-icon i[b-s1xggin9xp] {
        font-size: 1rem;
    }

    .offline-manager-modal .modal-title[b-s1xggin9xp] {
        font-size: 0.875rem;
    }

    .offline-manager-modal .cloud-account[b-s1xggin9xp] {
        font-size: 0.7rem;
    }

    .offline-manager-modal .close-btn[b-s1xggin9xp] {
        width: 28px;
        height: 28px;
    }

    .offline-manager-modal .action-bar[b-s1xggin9xp] {
        padding: 0.375rem;
        min-height: 45px;
    }

    .offline-manager-modal .action-group .btn[b-s1xggin9xp] {
        padding: 0.25rem 0.375rem;
        height: 26px; /* Reduced from 28px */
        font-size: 0.7rem;
    }

    .offline-manager-modal .selection-count[b-s1xggin9xp] {
        font-size: 0.7rem;
        padding: 0.125rem 0.375rem;
    }

    .offline-manager-modal .page-btn[b-s1xggin9xp] {
        width: 26px;
        height: 26px;
        font-size: 0.7rem;
    }

    .offline-manager-modal .page-info[b-s1xggin9xp] {
        font-size: 0.7rem;
    }

    .offline-manager-modal .file-row[b-s1xggin9xp] {
        padding: 0.5rem 0.375rem;
        min-height: 65px; /* Slightly smaller for tiny screens */
    }

    .offline-manager-modal .file-row-main[b-s1xggin9xp] {
        margin-bottom: 0.375rem;
    }

    .offline-manager-modal .file-row-details[b-s1xggin9xp] {
        padding-left: 38px; /* Adjust for smaller checkbox */
    }

    .offline-manager-modal .file-cell.select-cell[b-s1xggin9xp] {
        width: 28px;
        margin-right: 0.375rem;
    }

    .offline-manager-modal .file-cell.select-cell input[type="checkbox"][b-s1xggin9xp] {
        width: 14px;
        height: 14px;
    }

    .offline-manager-modal .file-info i[b-s1xggin9xp] {
        width: 14px;
        font-size: 0.875rem;
    }

    .offline-manager-modal .file-name[b-s1xggin9xp] {
        font-size: 0.85rem;
    }

    .offline-manager-modal .file-size[b-s1xggin9xp] {
        font-size: 0.7rem;
    }

    .offline-manager-modal .status-badge[b-s1xggin9xp] {
        padding: 0.125rem 0.25rem;
        font-size: 0.6rem;
    }

    .offline-manager-modal .status-badge i[b-s1xggin9xp] {
        font-size: 0.6rem;
    }

    .offline-manager-modal .progress-bar[b-s1xggin9xp] {
        width: 40px;
        height: 4px;
    }

    .offline-manager-modal .progress-text[b-s1xggin9xp],
    .offline-manager-modal .progress-complete[b-s1xggin9xp],
    .offline-manager-modal .progress-none[b-s1xggin9xp] {
        font-size: 0.6rem;
    }

    .offline-manager-modal .action-btn[b-s1xggin9xp] {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }

    .offline-manager-modal .modal-footer[b-s1xggin9xp] {
        padding: 0.5rem;
        min-height: 56px; /* Reduced from 70px */
        /* Extra padding for iPhone home indicator and safe area */
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0) + 8px); /* Reduced extra padding */
        /* Ensure footer doesn't get cut off */
        flex-shrink: 0;
        position: relative;
        z-index: 10;
        background: var(--bs-gray-50);
        border-top: 1px solid var(--bs-border-color);
        /* Force visibility on small screens */
        display: flex !important;
        /* Add breathing room at bottom */
        margin-bottom: calc(env(safe-area-inset-bottom, 0) + 4px);
    }

    [data-bs-theme="dark"] .offline-manager-modal .modal-footer[b-s1xggin9xp] {
        background: var(--bs-gray-800);
        border-top-color: var(--bs-gray-700);
    }

    /* Adjust files body for smaller screens */
    /* Maintain flex-driven sizing on very small screens as well */
    .offline-manager-modal .modal-content[b-s1xggin9xp],
    .offline-manager-modal .files-container[b-s1xggin9xp] {
        min-height: 0;
    }

    .offline-manager-modal .files-body[b-s1xggin9xp] {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        padding: 0.2rem;
        -webkit-overflow-scrolling: touch;
    }

    .offline-manager-modal .pagination-info[b-s1xggin9xp] {
        font-size: 0.7rem;
    }

    .offline-manager-modal .page-btn[b-s1xggin9xp] {
        width: 28px;
        height: 28px;
        font-size: 0.7rem;
    }

    .offline-manager-modal .pagination-info[b-s1xggin9xp] {
        font-size: 0.7rem;
    }

    .offline-manager-modal .page-btn[b-s1xggin9xp] {
        width: 28px;
        height: 28px;
    }
}

/* Remove Confirmation Modal */
.remove-confirm-modal[b-s1xggin9xp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1220; /* Higher than main modal and files-statusbar */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
}

.remove-confirm-modal.show[b-s1xggin9xp] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.remove-confirm-modal.hidden[b-s1xggin9xp] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.remove-confirm-modal .modal-overlay[b-s1xggin9xp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

.remove-confirm-modal .confirm-dialog[b-s1xggin9xp] {
    position: relative;
    width: 90vw;
    max-width: 500px;
    background: var(--bs-body-bg);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--bs-border-color);
    z-index: 2;
    overflow: hidden;
}

[data-bs-theme="dark"] .remove-confirm-modal .confirm-dialog[b-s1xggin9xp] {
    background: var(--bs-gray-900);
    border-color: var(--bs-gray-700);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.remove-confirm-modal .confirm-header[b-s1xggin9xp] {
    padding: 1.25rem 1.5rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.remove-confirm-modal .confirm-header h5[b-s1xggin9xp] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-body-color);
}

.remove-confirm-modal .confirm-header .close-btn[b-s1xggin9xp] {
    background: transparent;
    border: none;
    color: var(--bs-secondary);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.remove-confirm-modal .confirm-header .close-btn:hover[b-s1xggin9xp] {
    background: var(--bs-gray-200);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .remove-confirm-modal .confirm-header .close-btn:hover[b-s1xggin9xp] {
    background: var(--bs-gray-700);
}

.remove-confirm-modal .confirm-body[b-s1xggin9xp] {
    padding: 1.5rem;
}

.remove-confirm-modal .confirm-body p[b-s1xggin9xp] {
    margin-bottom: 1.25rem;
    color: var(--bs-body-color);
    line-height: 1.5;
}

.remove-confirm-modal .form-check[b-s1xggin9xp] {
    padding: 1rem;
    background: var(--bs-gray-50);
    border-radius: 8px;
    border: 1px solid var(--bs-border-color);
    position: relative;
}

[data-bs-theme="dark"] .remove-confirm-modal .form-check[b-s1xggin9xp] {
    background: var(--bs-gray-800);
    border-color: var(--bs-gray-700);
}

.remove-confirm-modal .form-check-input[b-s1xggin9xp] {
    margin-top: 0.125rem;
    margin-right: 0.5rem;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.remove-confirm-modal .form-check-label[b-s1xggin9xp] {
    font-weight: 500;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.4;
    cursor: pointer;
}

.remove-confirm-modal .form-check-label input[type="checkbox"][b-s1xggin9xp] {
    margin: 0;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.remove-confirm-modal .form-text[b-s1xggin9xp] {
    font-size: 0.875rem;
    margin-top: 0.25rem;
    margin-left: 1.5rem;
    color: var(--bs-secondary);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.remove-confirm-modal .confirm-footer[b-s1xggin9xp] {
    padding: 0 1.5rem 1.5rem;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.remove-confirm-modal .confirm-footer .btn[b-s1xggin9xp] {
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.remove-confirm-modal .confirm-footer .btn:hover[b-s1xggin9xp] {
    transform: translateY(-1px);
}

/* Mobile styles for confirmation modal */
@media (max-width: 768px) {
    .remove-confirm-modal .confirm-dialog[b-s1xggin9xp] {
        width: 95vw;
        margin: 1rem;
    }
    
    .remove-confirm-modal .confirm-header[b-s1xggin9xp] {
        padding: 1rem 1rem 0;
    }
    
    .remove-confirm-modal .confirm-header h5[b-s1xggin9xp] {
        font-size: 1.125rem;
    }
    
    .remove-confirm-modal .confirm-body[b-s1xggin9xp] {
        padding: 1rem;
    }
    
    .remove-confirm-modal .confirm-footer[b-s1xggin9xp] {
        padding: 0 1rem 1rem;
        flex-direction: column;
    }
    
    .remove-confirm-modal .confirm-footer .btn[b-s1xggin9xp] {
        width: 100%;
        order: 1;
    }
    
    .remove-confirm-modal .confirm-footer .btn-secondary[b-s1xggin9xp] {
        order: 2;
        margin-top: 0.5rem;
    }
}
/* /Components/OpenFileHandles.razor.rz.scp.css */
/* Open File Handles Modal - Matching OfflineDownloadManager Style */

/* Modal Structure */
.openfilehandles-modal[b-iajja3pumf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    pointer-events: none;
    /* iPhone safe areas */
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

.openfilehandles-modal.show[b-iajja3pumf] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.openfilehandles-modal .modal-overlay[b-iajja3pumf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1;
}

.openfilehandles-modal .modal-container[b-iajja3pumf] {
    position: relative;
    width: 90vw;
    max-width: 1400px;
    height: 85vh;
    max-height: 900px;
    background: var(--bs-body-bg);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* ensures no horizontal scroll at container level */
    border: 1px solid var(--bs-border-color);
    z-index: 2;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* Header */
.openfilehandles-modal .modal-header[b-iajja3pumf] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: none;
    min-height: 70px;
    position: relative;
}

.openfilehandles-modal .modal-header[b-iajja3pumf]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
}

.openfilehandles-modal .header-left[b-iajja3pumf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 0;
}

.openfilehandles-modal .header-icon[b-iajja3pumf] {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.openfilehandles-modal .header-icon i[b-iajja3pumf] {
    font-size: 1.125rem;
    color: white;
}

.openfilehandles-modal .header-controls[b-iajja3pumf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.5rem;
}

.openfilehandles-modal .header-info[b-iajja3pumf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.openfilehandles-modal .modal-title[b-iajja3pumf] {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    color: #fff;
}

.openfilehandles-modal .handle-count[b-iajja3pumf] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.openfilehandles-modal .refresh-indicator[b-iajja3pumf] {
    color: #fff;
    font-size: 0.8rem;
}

.openfilehandles-modal .header-right[b-iajja3pumf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Refresh Controls */
.openfilehandles-modal .refresh-controls[b-iajja3pumf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.openfilehandles-modal .update-interval-selector[b-iajja3pumf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.openfilehandles-modal .interval-select[b-iajja3pumf] {
    padding: 0.25rem 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 0.875rem;
    min-width: 60px;
}

.openfilehandles-modal .refresh-control-btn[b-iajja3pumf] {
    padding: 0.375rem 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    transition: all 0.15s ease;
    cursor: pointer;
}

.openfilehandles-modal .refresh-control-btn:hover[b-iajja3pumf] {
    background: rgba(255, 255, 255, 0.15);
}

.openfilehandles-modal .refresh-control-btn.active[b-iajja3pumf] {
    color: #22c55e;
}

.openfilehandles-modal .refresh-control-btn.paused[b-iajja3pumf] {
    color: #eab308;
}

.openfilehandles-modal .close-btn[b-iajja3pumf] {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.openfilehandles-modal .close-btn:hover[b-iajja3pumf] {
    background: rgba(255, 255, 255, 0.25);
}

/* Content */
.openfilehandles-modal .modal-content[b-iajja3pumf] {
    flex: 1;
    padding: 1.25rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* State Containers */
.openfilehandles-modal .state-container[b-iajja3pumf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 2rem;
    gap: 1rem;
    flex: 1;
    min-height: 300px;
}

.openfilehandles-modal .state-icon[b-iajja3pumf] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.openfilehandles-modal .loading-state .state-icon[b-iajja3pumf] {
    color: var(--bs-primary);
}

.openfilehandles-modal .error-state .state-icon[b-iajja3pumf] {
    color: var(--bs-danger);
}

.openfilehandles-modal .empty-state .state-icon[b-iajja3pumf] {
    color: var(--bs-secondary-color);
}

.openfilehandles-modal .state-container h5[b-iajja3pumf] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--bs-body-color);
}

.openfilehandles-modal .state-container p[b-iajja3pumf] {
    margin: 0;
    color: var(--bs-secondary-color);
}

/* Action Bar */
.openfilehandles-modal .action-bar[b-iajja3pumf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.openfilehandles-modal .action-group[b-iajja3pumf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.openfilehandles-modal .sort-group[b-iajja3pumf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.openfilehandles-modal .sort-group label[b-iajja3pumf] {
    margin: 0;
    color: var(--bs-secondary-color);
}

.openfilehandles-modal .sort-select[b-iajja3pumf] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: 0.875rem;
}

.openfilehandles-modal .sort-direction-btn[b-iajja3pumf] {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.openfilehandles-modal .sort-direction-btn:hover[b-iajja3pumf] {
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.openfilehandles-modal .selection-info[b-iajja3pumf] {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.openfilehandles-modal .total-count[b-iajja3pumf] {
    font-weight: 500;
}

/* Files Container */
.openfilehandles-modal .files-container[b-iajja3pumf] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bs-border-color);
    border-radius: 8px;
    overflow: hidden;
    background: var(--bs-body-bg);
}

.openfilehandles-modal .files-header[b-iajja3pumf] {
    display: grid;
    grid-template-columns: 2rem 2fr 1.5fr 80px 140px 100px 80px;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bs-secondary-bg);
    border-bottom: 1px solid var(--bs-border-color);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.openfilehandles-modal .files-body[b-iajja3pumf] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden; /* disable horizontal scroll globally */
    min-height: 0;
}

.openfilehandles-modal .file-row[b-iajja3pumf] {
    display: grid;
    grid-template-columns: 2rem 2fr 1.5fr 80px 140px 100px 80px;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
    align-items: center;
    transition: background-color 0.15s ease;
    min-height: 3rem;
}

.openfilehandles-modal .file-row:hover[b-iajja3pumf] {
    background: var(--bs-secondary-bg);
}

.openfilehandles-modal .file-row:last-child[b-iajja3pumf] {
    border-bottom: none;
}

.openfilehandles-modal .file-cell[b-iajja3pumf] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.openfilehandles-modal .icon-cell[b-iajja3pumf] {
    color: var(--bs-primary);
    font-size: 1rem;
}

.openfilehandles-modal .file-path[b-iajja3pumf] {
    min-width: 0;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.openfilehandles-modal .path-text[b-iajja3pumf] {
    font-family: 'Segoe UI', 'Roboto', monospace;
    font-size: 0.875rem;
    white-space: normal; /* allow wrapping */
    overflow: hidden; /* prevent horizontal scroll */
    text-overflow: clip; /* no ellipsis */
    color: var(--bs-body-color);
    min-width: 0;
    max-width: 100%;
    display: block;
    word-break: normal; /* do not break words */
    overflow-wrap: normal; /* do not force breaks within words */
}

.openfilehandles-modal .process-info[b-iajja3pumf] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.openfilehandles-modal .process-name[b-iajja3pumf] {
    font-weight: 500;
    color: var(--bs-body-color);
    font-size: 0.875rem;
    white-space: normal; /* allow wrap on desktop */
    overflow: hidden;
    text-overflow: clip;
    word-break: break-word;
}

.openfilehandles-modal .special-command[b-iajja3pumf] {
    font-size: 0.75rem;
    color: var(--bs-info);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.openfilehandles-modal .process-id[b-iajja3pumf] {
    font-family: 'Segoe UI', 'Roboto', monospace;
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.openfilehandles-modal .open-time[b-iajja3pumf] {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
}

.openfilehandles-modal .file-type[b-iajja3pumf] {
    font-size: 0.8rem;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-weight: 500;
}

.openfilehandles-modal .file-type.file[b-iajja3pumf] {
    background: var(--bs-info-bg-subtle);
    color: var(--bs-info);
}

.openfilehandles-modal .file-type.directory[b-iajja3pumf] {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning);
}

/* Mobile Layout */
.openfilehandles-modal .file-mobile-layout[b-iajja3pumf] {
    display: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .openfilehandles-modal[b-iajja3pumf] {
        align-items: flex-start;
        padding-top: 0;
    }

    .openfilehandles-modal .modal-container[b-iajja3pumf] {
        width: 100vw;
        height: 100vh;
        top: 0;
        margin: 0;
        border-radius: 0;
        max-height: none;
        padding: 0;
        box-sizing: border-box;
        margin-bottom: 0;
        min-height: 450px;
    }

    .openfilehandles-modal .modal-header[b-iajja3pumf] {
        padding: 0.5rem 0.75rem;
        min-height: 40px;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .openfilehandles-modal .header-icon[b-iajja3pumf] {
        width: 24px;
        height: 24px;
    }

    .openfilehandles-modal .header-icon i[b-iajja3pumf] {
        font-size: 0.875rem;
    }

    .openfilehandles-modal .modal-title[b-iajja3pumf] {
        font-size: 0.875rem;
        margin-bottom: 0;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .openfilehandles-modal .header-controls .interval-select[b-iajja3pumf] {
        font-size: 0.75rem;
        padding: 0.25rem 0.375rem;
        min-width: auto;
    }

    .openfilehandles-modal .refresh-control-btn[b-iajja3pumf] {
        padding: 0.25rem 0.375rem;
        font-size: 0.75rem;
    }

    .openfilehandles-modal .modal-content[b-iajja3pumf] {
        padding: 0.75rem;
    }

    /* Hide desktop grid layout */
    .openfilehandles-modal .files-header[b-iajja3pumf] {
        display: none;
    }

    .openfilehandles-modal .file-row[b-iajja3pumf] {
        display: flex;
        flex-direction: column;
        background: var(--bs-body-bg);
        border: none;
        border-bottom: 1px solid var(--bs-border-color);
        margin: 0;
        padding: 0.75rem;
        width: 100%;
        box-sizing: border-box;
        gap: 0.5rem;
    overflow-x: hidden; /* avoid row-level horizontal scroll */
    }

    .openfilehandles-modal .file-row > .file-cell[b-iajja3pumf] {
        display: none;
    }

    /* Show mobile layout */
    .openfilehandles-modal .file-mobile-layout[b-iajja3pumf] {
    display: block;
    width: 100%;
    }

    /* Three-line mobile layout */
    .openfilehandles-modal .mobile-line1[b-iajja3pumf],
    .openfilehandles-modal .mobile-line2[b-iajja3pumf],
    .openfilehandles-modal .mobile-line3[b-iajja3pumf] {
        display: flex;
        align-items: center;
        justify-content: flex-start; /* left align content */
        gap: 0.5rem;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden; /* prevent horizontal overflow at line level */
        text-align: left;
    }

    .openfilehandles-modal .mobile-line1[b-iajja3pumf] { gap: 0.5rem; align-items: flex-start; }
    .openfilehandles-modal .mobile-line2[b-iajja3pumf] { margin-top: 0.25rem; align-items: flex-start; }
    .openfilehandles-modal .mobile-line3[b-iajja3pumf] { margin-top: 0.25rem; justify-content: flex-start; }

    /* Lines 1 and 2: wrap on overflow (no horizontal scroll) */
    .openfilehandles-modal .mobile-line1 .path-cell[b-iajja3pumf],
    .openfilehandles-modal .mobile-line2 .process-cell[b-iajja3pumf] {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden; /* contain content within container width */
        white-space: normal;
        word-break: break-word;
    }

    /* Allow inner text to wrap naturally */
    .openfilehandles-modal .mobile-line1 .path-cell .path-text[b-iajja3pumf],
    .openfilehandles-modal .mobile-line2 .process-cell .process-name[b-iajja3pumf] {
        display: inline;
        white-space: normal;
        word-break: break-word;
        overflow: visible;
        text-overflow: clip;
        max-width: 100%;
    }

    /* Special command should also wrap on mobile */
    .openfilehandles-modal .file-mobile-layout .special-command[b-iajja3pumf] {
        white-space: normal;
    }

    /* Third line: do NOT scroll horizontally; single line with per-item ellipsis */
    .openfilehandles-modal .mobile-line3[b-iajja3pumf] {
        overflow-x: hidden;
        white-space: nowrap;
    }
    .openfilehandles-modal .mobile-line3 .file-cell[b-iajja3pumf] {
        flex: 0 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .openfilehandles-modal .mobile-line3 .type-cell[b-iajja3pumf],
    .openfilehandles-modal .mobile-line3 .pid-cell[b-iajja3pumf] {
        flex: 0 0 auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .openfilehandles-modal .mobile-line3 .pid-cell[b-iajja3pumf] {
        color: var(--bs-secondary-color);
        font-family: 'Segoe UI', 'Roboto', monospace;
        font-size: 0.8rem;
    }
    .openfilehandles-modal .mobile-line3 .opentime-cell[b-iajja3pumf],
    .openfilehandles-modal .mobile-line3 .elapsed-cell[b-iajja3pumf] {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 0.8rem;
    }
    .openfilehandles-modal .mobile-line3 .elapsed-cell[b-iajja3pumf] { font-weight: 600; }

    .openfilehandles-modal .file-row-details[b-iajja3pumf] {
        margin-bottom: 0;
        flex-wrap: wrap;
        gap: 0.75rem;
        padding-left: 42px;
    }

    .openfilehandles-modal .file-mobile-layout .file-cell[b-iajja3pumf] {
        display: flex;
        align-items: center;
    }

    .openfilehandles-modal .file-mobile-layout .path-cell[b-iajja3pumf] {
        flex: 1;
        min-width: 0;
    }

    /* Reset type-cell auto margin from older layout to avoid pushing it right in line 3 */
    .openfilehandles-modal .mobile-line3 .type-cell[b-iajja3pumf] { margin-left: 0; }

    .openfilehandles-modal .file-mobile-layout .process-cell[b-iajja3pumf],
    .openfilehandles-modal .file-mobile-layout .pid-cell[b-iajja3pumf],
    .openfilehandles-modal .file-mobile-layout .opentime-cell[b-iajja3pumf] {
        font-size: 0.8rem;
        color: var(--bs-secondary-color);
    }

    .openfilehandles-modal .file-mobile-layout .process-cell[b-iajja3pumf] {
        flex: 1;
        min-width: 0;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    html[data-theme="auto"] .openfilehandles-modal .modal-container[b-iajja3pumf],
    html[data-theme="dark"] .openfilehandles-modal .modal-container[b-iajja3pumf] {
        background: var(--bs-dark);
        border-color: var(--bs-border-color);
    }

    html[data-theme="auto"] .openfilehandles-modal .modal-header[b-iajja3pumf],
    html[data-theme="dark"] .openfilehandles-modal .modal-header[b-iajja3pumf] {
        background: var(--bs-secondary-bg);
        border-color: var(--bs-border-color);
    }
}

/* Button styles */
.openfilehandles-modal .btn[b-iajja3pumf] {
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.openfilehandles-modal .btn-sm[b-iajja3pumf] {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.openfilehandles-modal .btn-primary[b-iajja3pumf] {
    background: var(--bs-primary);
    color: white;
    border-color: var(--bs-primary);
}

.openfilehandles-modal .btn-primary:hover[b-iajja3pumf] {
    background: var(--bs-primary-hover, #0056b3);
    border-color: var(--bs-primary-hover, #0056b3);
}

.openfilehandles-modal .btn-outline-primary[b-iajja3pumf] {
    background: transparent;
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.openfilehandles-modal .btn-outline-primary:hover[b-iajja3pumf] {
    background: var(--bs-primary);
    color: white;
}

.openfilehandles-modal .btn-text[b-iajja3pumf] {
    white-space: nowrap;
}

@media (max-width: 576px) {
    .openfilehandles-modal .btn-text[b-iajja3pumf] { display: none; }
}

/* Extra small iPhone optimizations */
@media (max-width: 480px) {
    .openfilehandles-modal .modal-container[b-iajja3pumf] {
        width: 100vw;
        height: calc(100vh - env(safe-area-inset-top, 0) - env(safe-area-inset-bottom, 0) - 140px);
        top: calc(env(safe-area-inset-top, 0) + 50px);
        border-radius: 0;
        min-height: 380px;
        margin-bottom: 0;
    }

    .openfilehandles-modal .modal-header[b-iajja3pumf] {
        padding: 0.375rem 0.5rem;
        min-height: 32px;
        gap: 0.375rem;
    }

    .openfilehandles-modal .header-icon[b-iajja3pumf] { width: 20px; height: 20px; }
    .openfilehandles-modal .header-icon i[b-iajja3pumf] { font-size: 0.75rem; }
    .openfilehandles-modal .modal-title[b-iajja3pumf] { font-size: 0.75rem; }
    .openfilehandles-modal .close-btn[b-iajja3pumf] { width: 20px; height: 20px; }
    .openfilehandles-modal .close-btn i[b-iajja3pumf] { font-size: 0.625rem; }
}
/* /Components/PhotoSwipeViewer.razor.rz.scp.css */
/* PhotoSwipe Viewer Styles */

/* Custom action buttons that integrate with PhotoSwipe */
.pswp__button--action[b-cixrh8tcql] {
    background: none !important;
    border: none !important;
    color: #fff !important;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity 0.2s ease;
    position: relative;
}

.pswp__button--action:hover[b-cixrh8tcql] {
    opacity: 1;
}

.pswp__button--action:disabled[b-cixrh8tcql] {
    opacity: 0.5;
    cursor: not-allowed;
}

.pswp__button--action i[b-cixrh8tcql] {
    font-size: 16px;
}

/* Legacy button styles for compatibility */
.pw__button[b-cixrh8tcql] {
    background: none !important;
    border: none !important;
    color: white !important;
    cursor: pointer;
    font-size: 20px;
    padding: 10px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.75;
    transition: opacity 0.2s ease;
}

.pw__button:hover[b-cixrh8tcql] {
    opacity: 1;
}

.pw__preloader__icn[b-cixrh8tcql] {
    width: 20px;
    height: 20px;
}

.pw__preloader__cut[b-cixrh8tcql] {
    width: 20px;
    height: 20px;
    position: relative;
}

.pw__preloader__donut[b-cixrh8tcql] {
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-left: 2px solid white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    animation: spin-b-cixrh8tcql 1s linear infinite;
}

@keyframes spin-b-cixrh8tcql {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Overlay Properties Panel */
.overlay-properties[b-cixrh8tcql] {
    padding: 20px;
    overflow-y: auto;
    box-sizing: border-box;
}

.overlay-properties .file-properties-panel[b-cixrh8tcql] {
    background: transparent !important;
    border: none !important;
    color: white !important;
}

.overlay-properties .file-properties-panel h4[b-cixrh8tcql] {
    color: white !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.overlay-properties .file-properties-panel .property-item[b-cixrh8tcql] {
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 10px;
}

.overlay-properties .file-properties-panel .property-label[b-cixrh8tcql] {
    color: rgba(255, 255, 255, 0.7) !important;
    font-weight: 500;
}

.overlay-properties .file-properties-panel .property-value[b-cixrh8tcql] {
    color: white !important;
}

/* Media content styling */
.overlay-content[b-cixrh8tcql] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.overlay-content video[b-cixrh8tcql],
.overlay-content audio[b-cixrh8tcql] {
    max-width: 100%;
    max-height: 100%;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .overlay-properties[b-cixrh8tcql] {
        width: 100% !important;
        left: 0 !important;
        top: 44px !important;
        height: calc(100% - 44px) !important;
        max-height: none !important;
        background: rgba(0, 0, 0, 0.8) !important;
    }
}
/* /Components/PromotionComponent.razor.rz.scp.css */
/* Cloud115Promotions.razor.css */

.promotion-container[b-je1rux1e5o] {
    min-height: 100vh;
    background: linear-gradient(135deg, #2196f3 0%, #21cbf3 100%);
    position: relative;
}

.promotion-header[b-je1rux1e5o] {
    background: linear-gradient(135deg, #2196f3 0%, #21cbf3 100%);
    color: white;
    padding: 3rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.promotion-header[b-je1rux1e5o]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Ccircle cx='30' cy='30' r='2'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
    opacity: 0.1;
}

.hero-content[b-je1rux1e5o] {
    position: relative;
    z-index: 1;
    max-width: 800px;
    margin: 0 auto;
}

.hero-icon[b-je1rux1e5o] {
    font-size: 4rem;
    margin-bottom: 1rem;
    color: #03a9f4;
}

.hero-title[b-je1rux1e5o] {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-subtitle[b-je1rux1e5o] {
    font-size: 1.2rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.loading-container[b-je1rux1e5o],
.error-container[b-je1rux1e5o],
.empty-state[b-je1rux1e5o] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    background: var(--bg-primary);
    margin: 2rem auto;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.loading-text[b-je1rux1e5o] {
    margin-top: 1rem;
    color: var(--text-secondary);
}

.empty-icon[b-je1rux1e5o] {
    font-size: 3rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.promotion-tabs[b-je1rux1e5o] {
    background: var(--bg-primary);
    margin: 1rem auto;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.tabs-container[b-je1rux1e5o] {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border-color);
}

.tab-button[b-je1rux1e5o] {
    flex: 1;
    padding: 1rem 1.5rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
}

.tab-button:hover[b-je1rux1e5o] {
    background: var(--bg-secondary);
    color: var(--text-primary);
}

.tab-button.active[b-je1rux1e5o] {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    background: var(--bg-secondary);
}

.promotion-card[b-je1rux1e5o] {
    background: var(--bg-primary);
    margin: 2rem auto;
    max-width: 1200px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.card-header[b-je1rux1e5o] {
    background: linear-gradient(135deg, #2196f3 0%, #21cbf3 100%);
    color: white;
    padding: 2rem;
    text-align: center;
}

.promotion-title[b-je1rux1e5o] {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.promotion-subtitle[b-je1rux1e5o] {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 0;
}

.card-body[b-je1rux1e5o] {
    padding: 2rem;
}

.agreement-section[b-je1rux1e5o] {
    text-align: center;
    padding: 2rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 2rem;
}

.agreement-content[b-je1rux1e5o] {
    max-width: 600px;
    margin: 0 auto;
}

.agreement-text[b-je1rux1e5o] {
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.qr-section[b-je1rux1e5o] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
    align-items: center;
}

.qr-container[b-je1rux1e5o] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px dashed var(--border-color);
}

.qr-container:hover[b-je1rux1e5o] {
    border-color: var(--primary-color);
    background: var(--bg-secondary);
}

.qr-instructions[b-je1rux1e5o] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.instruction-text[b-je1rux1e5o] {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.rules-section[b-je1rux1e5o],
.notices-section[b-je1rux1e5o] {
    margin-bottom: 2rem;
}

.rules-title[b-je1rux1e5o],
.notices-title[b-je1rux1e5o] {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rules-content[b-je1rux1e5o],
.notices-content[b-je1rux1e5o] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.rule-item[b-je1rux1e5o],
.notice-item[b-je1rux1e5o] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-radius: 6px;
    border-left: 4px solid var(--primary-color);
}

.notice-item[b-je1rux1e5o] {
    border-left-color: var(--warning-color);
}

.rule-item i[b-je1rux1e5o],
.notice-item i[b-je1rux1e5o] {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.rule-item span[b-je1rux1e5o],
.notice-item span[b-je1rux1e5o] {
    flex: 1;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Commercial styling enhancements */
.btn-primary[b-je1rux1e5o] {
    background: linear-gradient(135deg, #2196f3 0%, #21cbf3 100%);
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
    transition: all 0.3s ease;
}

.btn-primary:hover[b-je1rux1e5o] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
}

.btn-success[b-je1rux1e5o] {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
    transition: all 0.3s ease;
}

.btn-success:hover[b-je1rux1e5o] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
}

/* Responsive design */
@media (max-width: 768px) {
    .hero-title[b-je1rux1e5o] {
        font-size: 2rem;
    }
    
    .hero-subtitle[b-je1rux1e5o] {
        font-size: 1rem;
    }
    
    .promotion-card[b-je1rux1e5o] {
        margin: 1rem;
    }
    
    .card-body[b-je1rux1e5o] {
        padding: 1rem;
    }
    
    .qr-section[b-je1rux1e5o] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .tabs-container[b-je1rux1e5o] {
        flex-direction: column;
    }
    
    .tab-button[b-je1rux1e5o] {
        text-align: center;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    *[b-je1rux1e5o] {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .promotion-header[b-je1rux1e5o] {
        background: var(--text-primary);
        color: var(--bg-primary);
    }
    
    .promotion-card[b-je1rux1e5o] {
        border: 2px solid var(--text-primary);
    }
}
/* /Components/ToastContainer.razor.rz.scp.css */
/* Global Toast Notifications */
.toast-overlay[b-86xmthrsi7] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 99999;
    pointer-events: none;
}

.toast-notification[b-86xmthrsi7] {
    background: var(--card-background);
    opacity: 0.95;
    backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    min-width: 280px;
    max-width: 350px;
    pointer-events: all;
    animation: slideInRight-b-86xmthrsi7 0.3s ease;
}

.toast-notification.success[b-86xmthrsi7] {
    border-color: rgba(34, 197, 94, 0.3);
}

.toast-notification.error[b-86xmthrsi7] {
    border-color: rgba(239, 68, 68, 0.3);
}

.toast-notification.warning[b-86xmthrsi7] {
    border-color: rgba(245, 158, 11, 0.3);
}

.toast-notification.info[b-86xmthrsi7] {
    border-color: rgba(59, 130, 246, 0.3);
}

.toast-header[b-86xmthrsi7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.toast-notification.success .toast-header[b-86xmthrsi7] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.toast-notification.error .toast-header[b-86xmthrsi7] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.toast-notification.warning .toast-header[b-86xmthrsi7] {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.toast-notification.info .toast-header[b-86xmthrsi7] {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
}

.toast-header i[b-86xmthrsi7] {
    font-size: 1rem;
}

.toast-header strong[b-86xmthrsi7] {
    flex: 1;
    font-weight: 600;
    font-size: 0.8rem;
}

.toast-close[b-86xmthrsi7] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: background-color 0.2s ease;
}

.toast-close:hover[b-86xmthrsi7] {
    background: rgba(0, 0, 0, 0.1);
}

.toast-body[b-86xmthrsi7] {
    padding: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text-primary);
}

/* Progress bar styles */
.toast-progress-container[b-86xmthrsi7] {
    margin-top: 0.75rem;
}

.toast-progress-bar[b-86xmthrsi7] {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    overflow: hidden;
}

.toast-progress-fill[b-86xmthrsi7] {
    height: 100%;
    background: currentColor;
    transition: width 0.3s ease;
    border-radius: 3px;
}

.toast-notification.success .toast-progress-fill[b-86xmthrsi7] {
    background: #16a34a;
}

.toast-notification.error .toast-progress-fill[b-86xmthrsi7] {
    background: #dc2626;
}

.toast-notification.warning .toast-progress-fill[b-86xmthrsi7] {
    background: #d97706;
}

.toast-notification.info .toast-progress-fill[b-86xmthrsi7] {
    background: #2563eb;
}

.toast-progress-text[b-86xmthrsi7] {
    font-size: 0.7rem;
    margin-top: 0.5rem;
    text-align: center;
    opacity: 0.8;
}

/* Multiple toasts stacking */
.toast-overlay .toast-notification + .toast-notification[b-86xmthrsi7] {
    margin-top: 0.5rem;
}

@keyframes slideInRight-b-86xmthrsi7 {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .toast-notification[b-86xmthrsi7] {
    background: var(--card-background);
    border-color: var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .toast-close:hover[b-86xmthrsi7] {
    background: rgba(255, 255, 255, 0.1);
}
/* /Pages/About.razor.rz.scp.css */
/* About Page Styles - Consistent with Project Design */

.about-page[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* Page Header */
.page-header[b-qmuar7efhk] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 2rem;
    border-radius: 0 0 1rem 1rem;
    margin-bottom: 1.5rem;
}

.page-header-content[b-qmuar7efhk] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

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

.page-title i[b-qmuar7efhk] {
    font-size: 1.5rem;
    opacity: 0.9;
}

.page-title h1[b-qmuar7efhk] {
    margin: 0;
    font-size: 2rem;
    font-weight: 600;
}

.page-actions[b-qmuar7efhk] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

.page-description[b-qmuar7efhk] {
    margin: 0;
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.5;
}

/* Loading and Error States */
.loading-container[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-spinner[b-qmuar7efhk] {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.error-container[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.error-message[b-qmuar7efhk] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--error-color);
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}

.error-message i[b-qmuar7efhk] {
    font-size: 1.2rem;
}

/* About Content */
.about-content[b-qmuar7efhk] {
    flex: 1;
    overflow-y: auto;
    padding: 0 2rem 2rem;
}

/* Info Sections */
.info-section[b-qmuar7efhk] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

.section-header[b-qmuar7efhk] {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem;
}

.section-title[b-qmuar7efhk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
}

.section-title i[b-qmuar7efhk] {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.section-title h2[b-qmuar7efhk] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-content[b-qmuar7efhk] {
    padding: 1.5rem;
}

/* Info Grid */
.info-grid[b-qmuar7efhk] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.25rem;
}

.info-item[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.info-label[b-qmuar7efhk] {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value[b-qmuar7efhk] {
    font-size: 1rem;
    color: var(--text-primary);
    font-weight: 500;
}

/* Description Text Formatting */
.description-text pre[b-qmuar7efhk] {
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.5;
    background: none;
    border: none;
}

/* Version Badge */
.version-badge[b-qmuar7efhk] {
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: inline-block;
}

.version-badge.new[b-qmuar7efhk] {
    background: var(--success-color);
    animation: pulse-b-qmuar7efhk 2s infinite;
}

/* Update States */
.update-checking[b-qmuar7efhk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.update-checking i[b-qmuar7efhk] {
    color: var(--primary-color);
}

.update-available[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.update-status[b-qmuar7efhk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    font-size: 1.1rem;
}

.update-status i[b-qmuar7efhk] {
    font-size: 1.25rem;
}

.text-success[b-qmuar7efhk] {
    color: var(--success-color);
}

.update-details[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
}

.update-actions[b-qmuar7efhk] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.update-current[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

.update-unknown[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
}

/* Buttons */
.btn[b-qmuar7efhk] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

/* External Links Section */
.external-links[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.external-link[b-qmuar7efhk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--primary-color);
    text-decoration: none;
    padding: 0.75rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
}

.external-link:hover[b-qmuar7efhk] {
    background: var(--bg-tertiary);
    color: var(--primary-color-hover);
    transform: translateX(0.25rem);
}

.external-link i[b-qmuar7efhk] {
    width: 1.25rem;
    font-size: 1rem;
    opacity: 0.8;
    flex-shrink: 0;
}

.link-info[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.link-title[b-qmuar7efhk] {
    font-weight: 600;
    font-size: 0.9rem;
}

.link-url[b-qmuar7efhk] {
    font-size: 0.8rem;
    opacity: 0.7;
    color: var(--text-secondary);
    font-family: monospace;
}

/* Button Styles */

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

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

.btn-primary:hover:not(:disabled)[b-qmuar7efhk] {
    background: var(--primary-color-hover);
    transform: translateY(-1px);
}

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

.btn-secondary:hover:not(:disabled)[b-qmuar7efhk] {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.btn-outline[b-qmuar7efhk] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.btn-outline:hover[b-qmuar7efhk] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

/* Animations */
@keyframes pulse-b-qmuar7efhk {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-header[b-qmuar7efhk] {
        padding: 1.5rem;
    }
    
    .page-header-content[b-qmuar7efhk] {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }
    
    .page-actions[b-qmuar7efhk] {
        justify-content: center;
        gap: 0.75rem;
    }
    
    .page-title h1[b-qmuar7efhk] {
        font-size: 1.75rem;
    }
    
    .about-content[b-qmuar7efhk] {
        padding: 0 1rem 1rem;
    }
    
    .info-grid[b-qmuar7efhk] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .update-actions[b-qmuar7efhk] {
        flex-direction: column;
    }
    
    .btn[b-qmuar7efhk] {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .page-actions[b-qmuar7efhk] {
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }
    
    .btn[b-qmuar7efhk] {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .page-header[b-qmuar7efhk] {
        padding: 1rem;
    }
    
    .page-title h1[b-qmuar7efhk] {
        font-size: 1.5rem;
    }
    
    .section-header[b-qmuar7efhk] {
        padding: 1rem;
    }
    
    .section-content[b-qmuar7efhk] {
        padding: 1rem;
    }
}

/* Update Progress Section */
.update-progress-section[b-qmuar7efhk] {
    margin-top: 1.5rem;
    padding: 1.5rem;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.update-status-header[b-qmuar7efhk] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.update-status-header i[b-qmuar7efhk] {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.update-phase-text[b-qmuar7efhk] {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1rem;
}

.download-progress[b-qmuar7efhk] {
    margin-bottom: 1rem;
}

.progress-info[b-qmuar7efhk] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.progress-percentage[b-qmuar7efhk] {
    font-weight: 600;
    color: var(--primary-color);
}

.progress-bar-container[b-qmuar7efhk] {
    width: 100%;
    height: 8px;
    background-color: var(--bg-secondary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar[b-qmuar7efhk] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
    transition: width 0.3s ease;
    min-width: 2px;
}

.progress-details[b-qmuar7efhk] {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.update-installing[b-qmuar7efhk] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.installing-spinner[b-qmuar7efhk] {
    font-size: 2rem;
    color: var(--primary-color);
}

.installing-spinner i[b-qmuar7efhk] {
    animation: spin-b-qmuar7efhk 2s linear infinite;
}

.update-message[b-qmuar7efhk] {
    margin-top: 1rem;
    padding: 0.75rem;
    background: var(--bg-secondary);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

@keyframes spin-b-qmuar7efhk {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
/* /Pages/Backups.razor.rz.scp.css */
/* Wizard Progress Styles */
.wizard-progress[b-goh01nakzb] {
    margin-bottom: 0rem;
    padding: 1.5rem 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

/* MinSize Rule Input Group - Desktop Layout */
.size-input-group[b-goh01nakzb] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    width: 100%;
}

.size-input-group input[type="number"][b-goh01nakzb] {
    flex: 1;
    min-width: 0;
}

.size-input-group select[b-goh01nakzb] {
    flex: none;
    width: auto;
    min-width: 80px;
    max-width: 100px;
}

/* Hide ApplyToFolder checkbox for MinSize rules - doesn't make sense for folders */
.filter-rule-item:has(.size-input-group) .apply-folder-check[b-goh01nakzb] {
    display: none;
}

.wizard-steps[b-goh01nakzb] {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.wizard-step[b-goh01nakzb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    position: relative;
}

.wizard-step:not(:last-child)[b-goh01nakzb]::after {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(50% + 20px);
    right: calc(-50% + 20px);
    height: 2px;
    background: var(--border-color);
    z-index: 1;
    border-radius: 1px;
}

.wizard-step.completed:not(:last-child)[b-goh01nakzb]::after {
    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
}

.step-number[b-goh01nakzb] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.wizard-step.active .step-number[b-goh01nakzb] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.2);
}

.wizard-step.completed .step-number[b-goh01nakzb] {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.step-label[b-goh01nakzb] {
    font-size: 0.875rem;
    color: var(--text-muted);
    text-align: center;
    max-width: 100px;
}

.wizard-step.active .step-label[b-goh01nakzb] {
    color: var(--primary-color);
    font-weight: 600;
}

.wizard-step.completed .step-label[b-goh01nakzb] {
    color: var(--success-color);
}

.wizard-progress-bar[b-goh01nakzb] {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill[b-goh01nakzb] {
    height: 100%;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

/* Wizard Step Content */
.wizard-step-content[b-goh01nakzb] {
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.wizard-step-content h4[b-goh01nakzb] {
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-weight: 600;
    position: static;
    background: transparent;
    z-index: auto;
    padding-bottom: 0;
}

/* Responsive Design for Wizard */
@media (max-width: 768px) {
    .wizard-steps[b-goh01nakzb] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .wizard-step[b-goh01nakzb] {
        flex-direction: row;
        text-align: left;
    }
    
    .wizard-step:not(:last-child)[b-goh01nakzb]::after {
        display: none;
    }
    
    .step-number[b-goh01nakzb] {
        margin-right: 1rem;
        margin-bottom: 0;
    }
    
    .step-label[b-goh01nakzb] {
        max-width: none;
        text-align: left;
    }
}

/* Backups Page Styles - Modern Design */
.content-header[b-goh01nakzb] {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #059669 0%, #0d9488 50%, #0891b2 100%);
    border-radius: 16px;
    padding: 2rem;
    color: white;
    box-shadow: 0 8px 32px rgba(5, 150, 105, 0.3);
    position: relative;
    overflow: hidden;
}

.header-content[b-goh01nakzb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

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

.header-actions .btn[b-goh01nakzb] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.header-actions .btn:hover[b-goh01nakzb] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.header-actions .btn:disabled[b-goh01nakzb] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.header-actions .btn i[b-goh01nakzb] {
    margin-right: 0.5rem;
}

.content-header h1[b-goh01nakzb] {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.content-description[b-goh01nakzb] {
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.backups-container[b-goh01nakzb] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Loading State */
.loading-container[b-goh01nakzb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    color: var(--text-muted);
}

.loading-spinner[b-goh01nakzb] {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}

/* Empty State */
.empty-state[b-goh01nakzb] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--card-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
}

.empty-icon[b-goh01nakzb] {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

.empty-state h3[b-goh01nakzb] {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
    font-weight: 600;
}

.empty-state p[b-goh01nakzb] {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.125rem;
}

/* Backup List */
.backup-list[b-goh01nakzb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.backup-card[b-goh01nakzb] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow);
    height: fit-content;
    max-width: 450px;
}

.backup-card:hover[b-goh01nakzb] {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color-light);
}

/* Status-specific card styling */
.backup-card.running[b-goh01nakzb] {
    border-left: 4px solid var(--warning-color);
    background: linear-gradient(135deg, var(--warning-color-light) 0%, var(--card-background) 100%);
}

.backup-card.error[b-goh01nakzb] {
    border-left: 4px solid var(--danger-color);
    background: linear-gradient(135deg, var(--danger-color-light) 0%, var(--card-background) 100%);
}

.backup-card.disabled[b-goh01nakzb] {
    border-left: 4px solid var(--muted-color);
    background: linear-gradient(135deg, var(--muted-color-light) 0%, var(--card-background) 100%);
    opacity: 0.8;
}

.backup-card-header[b-goh01nakzb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

/* Ensure backup-info can shrink and not overflow status */
.backup-card-header .backup-info[b-goh01nakzb] {
    flex: 1 1 auto;
    min-width: 0; /* Allow shrinking */
}

/* On small screens, limit backup-info width to keep status visible */
@media (max-width: 576px) {
    .backup-card-header .backup-info[b-goh01nakzb] {
        max-width: calc(100% - 120px); /* Reserve space for status */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    /* Keep backup action buttons in one row and scrollable on mobile */
    .backup-actions[b-goh01nakzb] {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .backup-actions .btn[b-goh01nakzb] {
        flex: 0 0 auto;
    }
}

.backup-info[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.backup-icon[b-goh01nakzb] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    background: var(--primary-color-light);
    color: var(--primary-color);
    flex-shrink: 0;
}

.backup-details[b-goh01nakzb] {
    flex: 1;
    min-width: 0;
}

.backup-name[b-goh01nakzb] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.backup-source[b-goh01nakzb] {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.backup-source-container[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    width: 100%;
}

.backup-source-copy[b-goh01nakzb] {
    color: var(--text-muted);
    padding: 0.125rem 0.25rem;
    min-width: auto;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

.backup-source-copy:hover[b-goh01nakzb] {
    color: var(--primary-color);
    opacity: 1;
}

.backup-source-copy i[b-goh01nakzb] {
    font-size: 0.75rem;
}

.backup-status[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.backup-status.enabled[b-goh01nakzb] {
    background: var(--success-color-light);
    color: var(--success-color);
}

.backup-status.disabled[b-goh01nakzb] {
    background: var(--muted-color-light);
    color: var(--text-muted);
}

.backup-status.running[b-goh01nakzb] {
    background: var(--warning-color-light);
    color: var(--warning-color);
    animation: pulse 2s infinite;
}

.backup-actions[b-goh01nakzb] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.backup-action-btn[b-goh01nakzb] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--card-background);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.8rem;
}

.backup-action-btn:hover[b-goh01nakzb] {
    background: var(--primary-color-light);
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: scale(1.05);
}

.backup-action-btn:disabled[b-goh01nakzb] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.backup-card-content[b-goh01nakzb] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.backup-info-grid[b-goh01nakzb] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.backup-info-item[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.375rem;
    background: var(--muted-color-light);
    border-radius: 5px;
    font-size: 0.75rem;
}

.backup-info-item i[b-goh01nakzb] {
    color: var(--primary-color);
    width: 12px;
    text-align: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.info-label[b-goh01nakzb] {
    color: var(--text-muted);
    font-weight: 500;
    min-width: 0;
    font-size: 0.7rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.info-value[b-goh01nakzb] {
    color: var(--text-primary);
    font-weight: 600;
    margin-left: auto;
    font-size: 0.7rem;
    flex-shrink: 0;
}

.backup-last-run[b-goh01nakzb] {
    color: var(--text-muted);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: var(--primary-color-light);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
}

.backup-last-run i[b-goh01nakzb] {
    color: var(--primary-color);
}

.backup-schedule[b-goh01nakzb] {
    color: var(--text-muted);
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.backup-schedule i[b-goh01nakzb] {
    color: var(--primary-color);
}

.backup-progress[b-goh01nakzb] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.progress-info[b-goh01nakzb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.progress-status[b-goh01nakzb] {
    color: var(--text-muted);
}

.progress-percentage[b-goh01nakzb] {
    font-weight: 600;
    color: var(--primary-color);
}

.progress-bar-container[b-goh01nakzb] {
    width: 100%;
    height: 8px;
    background: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar[b-goh01nakzb] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
    transition: width 0.3s ease;
    border-radius: 4px;
}

/* Modal Styles */
.modal-overlay[b-goh01nakzb] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.modal[b-goh01nakzb] {
    background: var(--card-background);
    border-radius: 16px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-color);
    animation: slideIn 0.3s ease;
}

.modal-header[b-goh01nakzb] {
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title[b-goh01nakzb] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.modal-close[b-goh01nakzb] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: none;
    background: var(--muted-color-light);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-close:hover[b-goh01nakzb] {
    background: var(--danger-color-light);
    color: var(--danger-color);
}

.modal-body[b-goh01nakzb] {
    padding: 1.5rem;
    position: relative;
    /* Ensure dropdowns are contained within modal */
    overflow: visible;
}

.modal-footer[b-goh01nakzb] {
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Modal Backdrop and Centering */
.modal-backdrop[b-goh01nakzb] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 9999 !important;
    backdrop-filter: blur(4px);
    padding: 1rem !important;
    box-sizing: border-box !important;
}

.modal-content[b-goh01nakzb] {
    background: var(--card-background) !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    max-height: calc(100vh - 2rem) !important;
    overflow-y: auto !important;
    position: relative !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 500px !important;
    animation: modalFadeIn-b-goh01nakzb 0.2s ease-out !important;
    border: none !important;
}

@keyframes modalFadeIn-b-goh01nakzb {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-header[b-goh01nakzb] {
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.modal-header h3[b-goh01nakzb] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    padding-right: 1rem;
}

.btn-close[b-goh01nakzb] {
    background: none !important;
    border: none !important;
    padding: 0.5rem !important;
    border-radius: 6px !important;
    color: var(--text-muted) !important;
    transition: all 0.2s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    cursor: pointer !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    outline: none !important;
}

.btn-close[b-goh01nakzb]::before,
.btn-close[b-goh01nakzb]::after {
    display: none !important;
    content: none !important;
}

.btn-close .btn-close[b-goh01nakzb] {
    display: none !important;
}

.btn-close:hover[b-goh01nakzb] {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger-color) !important;
    transform: none !important;
}

.btn-close:focus[b-goh01nakzb] {
    box-shadow: none !important;
    outline: none !important;
}

.btn-close i[b-goh01nakzb] {
    font-size: 1rem !important;
    display: inline-block !important;
    pointer-events: none !important;
}

.modal-body[b-goh01nakzb] {
    padding: 1.5rem;
}

.modal-footer[b-goh01nakzb] {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* Backup Settings Modal Specific */
.backup-settings-modal[b-goh01nakzb] {
    max-width: 800px !important;
    width: 95% !important;
    max-height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.backup-settings-modal .modal-body[b-goh01nakzb] {
    overflow-y: auto !important;
    flex: 1 !important;
    position: relative !important;
    max-height: calc(90vh - 200px) !important;
    /* Ensure dropdown has space to appear below buttons */
    padding-bottom: 2rem !important;
}

.backup-settings-modal .modal-body[b-goh01nakzb]::-webkit-scrollbar {
    width: 8px;
}

.backup-settings-modal .modal-body[b-goh01nakzb]::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 4px;
}

.backup-settings-modal .modal-body[b-goh01nakzb]::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.backup-settings-modal .modal-body[b-goh01nakzb]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-dark);
}

.backup-settings-modal .tab-content[b-goh01nakzb] {
    overflow: visible !important;
}

.backup-settings-modal .filter-rules-section[b-goh01nakzb] {
    overflow: visible !important;
}

/* Tab Navigation - Modern Dark Theme */
.tab-navigation[b-goh01nakzb] {
    display: flex;
    border-bottom: none;
    margin-bottom: 1.5rem;
    gap: 0;
    background: var(--card-background);
    border-radius: 12px;
    padding: 0.375rem;
    backdrop-filter: blur(8px);
    border: 1px solid var(--border-color);
}

.tab-btn[b-goh01nakzb] {
    background: transparent;
    border: none;
    padding: 1rem 1.5rem;
    cursor: pointer;
    border-radius: 8px;
    color: rgba(156, 163, 175, 0.8);
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.875rem;
    white-space: nowrap;
    flex: 1;
    justify-content: center;
    min-height: 48px;
}

.tab-btn:hover:not(.active)[b-goh01nakzb] {
    background: var(--muted-color-light);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.tab-btn.active[b-goh01nakzb] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.9), rgba(37, 99, 235, 0.9));
    color: white;
    box-shadow: 
        0 4px 12px rgba(59, 130, 246, 0.25),
        0 2px 6px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.tab-btn.active[b-goh01nakzb]::before {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.3));
    border-radius: 9px;
    z-index: -1;
}

.tab-btn i[b-goh01nakzb] {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.tab-btn.active i[b-goh01nakzb] {
    transform: scale(1.1);
}

.filter-count[b-goh01nakzb] {
    background: rgba(156, 163, 175, 0.2);
    padding: 0.125rem 0.375rem;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.25rem;
}

.tab-content[b-goh01nakzb] {
    min-height: 400px;
}

.settings-section[b-goh01nakzb] {
    padding: 0.5rem 0;
}

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

.form-group[b-goh01nakzb] {
    margin-bottom: 1rem;
}

.form-group label[b-goh01nakzb] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-check[b-goh01nakzb] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.form-check-input[b-goh01nakzb] {
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.form-check-label[b-goh01nakzb] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.form-text[b-goh01nakzb] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    display: block;
}

.input-group[b-goh01nakzb] {
    display: flex;
    align-items: center;
}

.input-group-text[b-goh01nakzb] {
    background: var(--muted-color-light);
    border: 1px solid var(--border-color);
    border-left: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-muted);
    border-radius: 0 6px 6px 0;
}

.input-group .form-control[b-goh01nakzb] {
    border-radius: 6px 0 0 6px;
    border-right: none;
}

/* Form Control Select Dropdowns */
.form-control select[b-goh01nakzb],
select.form-control[b-goh01nakzb] {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

/* Theme-specific dropdown arrows for form-control selects */
:root[data-theme="dark"] .form-control select[b-goh01nakzb],
:root[data-theme="dark"] select.form-control[b-goh01nakzb],
:root:not([data-theme]) .form-control select[b-goh01nakzb],
:root:not([data-theme]) select.form-control[b-goh01nakzb] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

:root[data-theme="light"] .form-control select[b-goh01nakzb],
:root[data-theme="light"] select.form-control[b-goh01nakzb] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Schedules Section */
.schedules-section[b-goh01nakzb] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--muted-color-light);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.section-header[b-goh01nakzb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.section-header h4[b-goh01nakzb] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.schedules-list[b-goh01nakzb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.schedule-item[b-goh01nakzb] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.schedule-item:hover[b-goh01nakzb] {
    border-color: var(--primary-color-light);
    box-shadow: 0 2px 8px rgba(77, 171, 247, 0.1);
}

.schedule-controls[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.time-inputs[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.time-input[b-goh01nakzb] {
    width: 60px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 0.375rem 0.5rem;
    border-radius: 4px;
    font-size: 0.875rem;
    text-align: center;
}

.time-input:focus[b-goh01nakzb] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px rgba(77, 171, 247, 0.1);
}

.days-of-week-section[b-goh01nakzb] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.days-selector[b-goh01nakzb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.day-checkbox[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--muted-color-light);
    color: var(--text-primary);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}

.day-checkbox:hover[b-goh01nakzb] {
    background: var(--primary-color-light);
    border-color: var(--primary-color);
}

.day-checkbox input[type="checkbox"][b-goh01nakzb] {
    margin: 0;
}

/* Filter Rules Section */
.filter-type-dropdown[b-goh01nakzb] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.filter-type-dropdown select[b-goh01nakzb] {
    min-width: 150px;
}

.filter-rules-list[b-goh01nakzb] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.filter-rule-item[b-goh01nakzb] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.filter-rule-item:hover[b-goh01nakzb] {
    border-color: var(--primary-color-light);
    box-shadow: 0 2px 8px rgba(77, 171, 247, 0.1);
}

.rule-header[b-goh01nakzb] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 1rem;
}

/* Section Header */
.section-header[b-goh01nakzb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.section-header h4[b-goh01nakzb] {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.rule-info[b-goh01nakzb] {
    flex: 1;
}

.rule-title[b-goh01nakzb] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rule-controls[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.rule-toggle-group[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--muted-color-light);
    padding: 0.25rem;
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.rule-toggle-group input[type="radio"][b-goh01nakzb] {
    margin: 0;
}

.toggle-label[b-goh01nakzb] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0 0.5rem 0 0.25rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.rule-toggle-group input[type="radio"]:checked + .toggle-label[b-goh01nakzb] {
    color: var(--text-primary);
    font-weight: 600;
}

.apply-folder-check[b-goh01nakzb] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.rule-delete-btn[b-goh01nakzb] {
    background: rgba(239, 68, 68, 0.8);
    border: 1px solid rgba(239, 68, 68, 0.6);
    color: white;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rule-delete-btn:hover[b-goh01nakzb] {
    background: rgba(220, 38, 38, 0.9);
    border-color: rgba(220, 38, 38, 0.8);
    transform: translateY(-1px);
}

.rule-content[b-goh01nakzb] {
    margin-top: 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Backup Destinations Styles */
.backup-destinations-compact[b-goh01nakzb] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

.destinations-title-compact[b-goh01nakzb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.destinations-title-text[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.destinations-title-text i[b-goh01nakzb] {
    color: var(--primary-color);
    font-size: 0.875rem;
}

.destinations-list-compact[b-goh01nakzb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.destination-item-compact[b-goh01nakzb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--muted-color-light);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.destination-item-compact:hover[b-goh01nakzb] {
    background: var(--primary-color-light);
    border-color: var(--primary-color);
    transform: translateX(4px);
}

/* Inline destination adding styles */
.destination-item-compact.destination-item-adding[b-goh01nakzb] {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    background: var(--success-color-light);
    border-color: var(--success-color);
    padding: 1rem;
}

.destination-item-compact.destination-item-adding:hover[b-goh01nakzb] {
    background: var(--success-color-light);
    border-color: var(--success-color);
    transform: none;
}

.destination-item-compact.destination-item-adding .input-group[b-goh01nakzb] {
    margin-bottom: 0;
}

.destination-item-compact.destination-item-adding .destination-options[b-goh01nakzb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.destination-item-compact.destination-item-adding .destination-options .form-check-label[b-goh01nakzb] {
    flex: 1;
    margin: 0;
    font-size: 0.875rem;
}

.destination-item-compact.destination-item-adding .destination-options .btn[b-goh01nakzb] {
    flex: none;
}

.destination-info-compact[b-goh01nakzb] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.destination-path-compact[b-goh01nakzb] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.destination-status-compact[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.destination-status-compact.enabled[b-goh01nakzb] {
    color: var(--success-color);
}

.destination-status-compact.disabled[b-goh01nakzb] {
    color: var(--text-muted);
}

.destination-status-compact i[b-goh01nakzb] {
    font-size: 0.75rem;
}

.backup-action-btn-small[b-goh01nakzb] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.backup-action-btn-small:hover[b-goh01nakzb] {
    background: var(--danger-color-light);
    color: var(--danger-color);
    border-color: var(--danger-color);
    transform: scale(1.05);
}

.backup-error-message[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--danger-color-light);
    border: 1px solid var(--danger-color);
    border-radius: 8px;
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.backup-error-message i[b-goh01nakzb] {
    font-size: 1rem;
    flex-shrink: 0;
}

/* Add Rule Section */
.add-rule-section[b-goh01nakzb] {
    margin-bottom: 1rem;
    position: relative;
}

.rule-type-dropdown[b-goh01nakzb] {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 200px;
}

/* Handle dropdown positioning within modal constraints */
.modal-body .rule-type-dropdown[b-goh01nakzb] {
    position: relative;
    display: inline-block;
    width: auto;
    min-width: 120px;
}

/* Always keep dropdown below the button */
.modal-body .add-rule-section .rule-type-dropdown-menu[b-goh01nakzb],
.modal-body .filter-rules-section .add-rule-section .rule-type-dropdown-menu[b-goh01nakzb] {
    top: 100%;
    bottom: auto;
    margin-top: 0.25rem;
    margin-bottom: 0;
}

.rule-type-dropdown-menu[b-goh01nakzb] {
    position: absolute;
    top: 100%;
    bottom: auto;
    left: 0;
    right: auto;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 999;
    /* Remove max-height to show all items without scrollbar */
    overflow: visible;
    backdrop-filter: blur(10px);
    min-width: 180px;
    max-width: 250px;
    margin-top: 0.25rem;
    margin-bottom: 0;
    /* Ensure dropdown stays within modal bounds */
    white-space: nowrap;
}

/* Smart positioning: align dropdown to right edge when it would overflow */
.modal-body .filter-rules-section .rule-type-dropdown-menu[b-goh01nakzb] {
    left: auto;
    right: 0;
    min-width: 160px;
    max-width: 200px;
}

/* For mobile or narrow modals, ensure dropdown doesn't exceed modal width */
.backup-settings-modal .rule-type-dropdown-menu[b-goh01nakzb] {
    max-width: calc(100% - 2rem);
    left: 0;
    right: auto;
}

/* Specific positioning for filter rules in narrow containers */
.backup-settings-modal .filter-rules-section .rule-type-dropdown-menu[b-goh01nakzb] {
    left: auto;
    right: 0;
    max-width: 180px;
}

.rule-type-dropdown-menu .dropdown-item[b-goh01nakzb] {
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.rule-type-dropdown-menu .dropdown-item:last-child[b-goh01nakzb] {
    border-bottom: none;
}

.rule-type-dropdown-menu .dropdown-item:hover[b-goh01nakzb] {
    background: var(--primary-color-light);
    color: var(--primary-color);
}

.rule-type-dropdown-menu .dropdown-item i[b-goh01nakzb] {
    font-size: 0.875rem;
    width: 16px;
    text-align: center;
}

.dropdown-cancel[b-goh01nakzb] {
    padding: 0.5rem 1rem;
    background: var(--muted-color-light);
    border-top: 1px solid var(--border-color);
    color: var(--text-muted);
    cursor: pointer;
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.dropdown-cancel:hover[b-goh01nakzb] {
    background: var(--danger-color-light);
    color: var(--danger-color);
}

/* Destination Management Styles */
.destinations-section[b-goh01nakzb] {
    margin-top: 1rem;
    padding: 1rem;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--shadow);
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    animation: fadeInDestinations-b-goh01nakzb 0.3s ease-out;
}

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

.destinations-section .section-header[b-goh01nakzb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: var(--card-background);
    z-index: 10;
}

.destinations-list[b-goh01nakzb] {
    flex: 1;
    overflow-y: auto;
    max-height: 160px;
    padding-right: 0.5rem;
}

.destinations-list[b-goh01nakzb]::-webkit-scrollbar {
    width: 6px;
}

.destinations-list[b-goh01nakzb]::-webkit-scrollbar-track {
    background: var(--border-color);
    border-radius: 3px;
}

.destinations-list[b-goh01nakzb]::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 3px;
}

.destinations-list[b-goh01nakzb]::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color-dark);
}

.destinations-section .section-header label[b-goh01nakzb] {
    color: var(--text-primary);
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.destinations-section .section-header label[b-goh01nakzb]::before {
    content: '\f0c7';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.destination-item[b-goh01nakzb] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.destination-item:hover[b-goh01nakzb] {
    border-color: var(--primary-color-light);
    box-shadow: 0 4px 16px rgba(77, 171, 247, 0.1);
    transform: translateY(-2px);
}

.destination-item[b-goh01nakzb]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.destination-item:hover[b-goh01nakzb]::before {
    opacity: 1;
}

.destination-item .input-group[b-goh01nakzb] {
    margin-bottom: 1rem;
}

.destination-item .form-control[b-goh01nakzb] {
    border-radius: 8px 0 0 8px;
    border-right: none;
    background: var(--input-bg);
    transition: all 0.2s ease;
}

.destination-item .form-control:focus[b-goh01nakzb] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.1);
    outline: none;
}

.destination-item .btn[b-goh01nakzb] {
    border-radius: 0;
    border-left: none;
    transition: all 0.2s ease;
}

.destination-item .btn:last-child[b-goh01nakzb] {
    border-radius: 0 8px 8px 0;
}

.destination-item .btn:hover[b-goh01nakzb] {
    transform: translateY(-1px);
}

.destination-options[b-goh01nakzb] {
    padding: 1rem;
    background: var(--muted-color-light);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.destination-options:hover[b-goh01nakzb] {
    background: var(--primary-color-light);
    border-color: var(--primary-color);
}

.destination-options .form-check-label[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
}

.destination-options .form-check-input[b-goh01nakzb] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.destination-options strong[b-goh01nakzb] {
    color: var(--primary-color);
    font-weight: 600;
}

.no-destinations-message[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--info-color-light);
    border: 1px solid var(--info-color);
    border-radius: 8px;
    color: var(--info-color);
    font-size: 0.875rem;
    font-weight: 500;
}

.no-destinations-message i[b-goh01nakzb] {
    font-size: 1.1rem;
    opacity: 0.8;
}

/* Responsive Design for Destination Management */
@media (max-width: 768px) {
    /* Header responsive layout */
    .content-header .header-content[b-goh01nakzb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    /* Header button mobile optimization - higher specificity */
    .content-header .header-actions .btn span[b-goh01nakzb] {
        display: none !important;
    }
    
    /* Make buttons take full width and arrange properly */
    .content-header .header-actions[b-goh01nakzb] {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        justify-content: stretch;
    }
    
    .content-header .header-actions .btn[b-goh01nakzb] {
        flex: 1;
        justify-content: center;
        padding: 0.75rem 1rem;
        min-width: auto;
        white-space: nowrap;
    }
    
    .content-header .header-actions .btn i[b-goh01nakzb] {
        margin-right: 0;
        font-size: 1rem;
    }
    
    /* Tab navigation mobile responsive design - dropdown style */
    .tab-navigation[b-goh01nakzb] {
        flex-direction: column;
        gap: 0;
        padding: 0;
        background: transparent;
        border: none;
        margin-bottom: 1rem;
        position: relative;
    }
    
    /* Hide all tab buttons on mobile except active one */
    .tab-btn[b-goh01nakzb] {
        display: none;
        flex: none;
        padding: 1rem 1.25rem;
        justify-content: space-between;
        text-align: left;
        border-radius: 8px;
        font-size: 0.875rem;
        gap: 0.75rem;
        background: var(--card-background);
        border: 1px solid var(--border-color);
        margin-bottom: 0.25rem;
        position: relative;
        transition: all 0.2s ease;
        opacity: 0;
        transform: translateY(-5px);
    }
    
    /* Show only the active tab button as a dropdown trigger */
    .tab-btn.active[b-goh01nakzb] {
        display: flex !important;
        background: var(--primary-color);
        color: white;
        cursor: pointer;
        transform: none;
        box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        opacity: 1;
        z-index: 100;
    }
    
    /* Add dropdown arrow to active tab */
    .tab-btn.active[b-goh01nakzb]::after {
        content: '\f078';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        font-size: 0.875rem;
        transition: transform 0.2s ease;
    }
    
    /* Show dropdown when navigation is in expanded state */
    .tab-navigation.expanded .tab-btn[b-goh01nakzb] {
        display: flex !important;
        opacity: 1;
        transform: translateY(0);
    }
    
    .tab-navigation.expanded .tab-btn.active[b-goh01nakzb]::after {
        transform: rotate(180deg);
    }
    
    /* Non-active buttons in dropdown */
    .tab-navigation.expanded .tab-btn:not(.active)[b-goh01nakzb] {
        background: var(--card-background);
        color: var(--text-primary);
        border-color: var(--border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        z-index: 99;
    }
    
    .tab-navigation.expanded .tab-btn:not(.active):hover[b-goh01nakzb] {
        background: var(--primary-color-light);
        color: var(--primary-color);
        border-color: var(--primary-color);
        transform: translateX(4px);
    }
    
    /* Animation for dropdown items */
    .tab-navigation.expanded .tab-btn:nth-child(2)[b-goh01nakzb] {
        animation-delay: 0.05s;
    }
    
    .tab-navigation.expanded .tab-btn:nth-child(3)[b-goh01nakzb] {
        animation-delay: 0.1s;
    }
    
    @keyframes slideInMobile-b-goh01nakzb {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .tab-navigation.expanded .tab-btn:not(.active)[b-goh01nakzb] {
        animation: slideInMobile-b-goh01nakzb 0.2s ease forwards;
    }
    
    .tab-btn i[b-goh01nakzb] {
        font-size: 1rem;
        min-width: 16px;
    }
    
    /* Backup settings modal mobile improvements */
    .backup-settings-modal[b-goh01nakzb] {
        width: 98% !important;
        max-height: 95vh !important;
        margin: 1rem auto !important;
    }
    
    .backup-settings-modal .modal-header[b-goh01nakzb] {
        padding: 1rem 1.25rem 0.75rem !important;
    }
    
    .backup-settings-modal .modal-header h3[b-goh01nakzb] {
        font-size: 1.125rem !important;
        line-height: 1.4 !important;
        word-break: break-word !important;
    }
    
    .backup-settings-modal .modal-body[b-goh01nakzb] {
        max-height: calc(95vh - 220px) !important;
        padding: 1rem 1.25rem !important;
    }
    
    .backup-settings-modal .modal-footer[b-goh01nakzb] {
        padding: 0.75rem 1.25rem 1rem !important;
        gap: 0.5rem !important;
    }
    
    /* Tab content mobile adjustments */
    .tab-content[b-goh01nakzb] {
        min-height: 300px !important;
        margin-top: 0.5rem !important;
    }
    
    /* Form elements mobile optimization */
    .backup-settings-modal .form-group[b-goh01nakzb] {
        margin-bottom: 1.25rem !important;
    }
    
    .backup-settings-modal .form-control[b-goh01nakzb] {
        font-size: 1rem !important;
        padding: 0.75rem !important;
    }
    
    /* Tab panel mobile improvements */
    .tab-panel[b-goh01nakzb] {
        padding: 0 !important;
    }
    
    .tab-panel .form-text[b-goh01nakzb] {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        margin-top: 0.5rem !important;
    }
    
    /* Filter rules section mobile */
    .filter-rules-section .section-header[b-goh01nakzb] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }
    
    .filter-rules-section .add-rule-section[b-goh01nakzb] {
        width: 100% !important;
    }
    
    .filter-rule-item[b-goh01nakzb] {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        position: relative !important; /* For absolute positioning of delete button */
    }
    
    /* Mobile optimization for filter rule header */
    .filter-rule-item .rule-header[b-goh01nakzb] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Rule info takes full width */
    .filter-rule-item .rule-info[b-goh01nakzb] {
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Rule title mobile optimization */
    .filter-rule-item .rule-title[b-goh01nakzb] {
        font-size: 0.95rem !important;
        margin-bottom: 0.75rem !important;
        padding-right: 3rem !important; /* Space for delete button */
    }
    
    /* Position delete button in top-right corner */
    .filter-rule-item .rule-delete-btn[b-goh01nakzb] {
        position: absolute !important;
        top: 1rem !important;
        right: 1rem !important;
        padding: 0.375rem !important;
        min-width: 32px !important;
        height: 32px !important;
        font-size: 0.7rem !important;
    }
    
    /* Rule controls mobile layout */
    .filter-rule-item .rule-controls[b-goh01nakzb] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    /* Toggle group mobile optimization */
    .filter-rule-item .rule-toggle-group[b-goh01nakzb] {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.5rem !important;
        background: var(--muted-color-light) !important;
        border-radius: 8px !important;
    }
    
    .filter-rule-item .toggle-label[b-goh01nakzb] {
        font-size: 0.875rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    /* ApplyToFolder checkbox mobile */
    .filter-rule-item .apply-folder-check[b-goh01nakzb] {
        justify-content: flex-start !important;
        padding: 0.5rem 0 !important;
        font-size: 0.875rem !important;
    }
    
    /* Rule content (Extensions input) mobile */
    .filter-rule-item .rule-content[b-goh01nakzb] {
        margin-top: 1rem !important;
        padding-top: 1rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    /* Extensions input mobile optimization */
    .filter-rule-item .form-control[b-goh01nakzb] {
        font-size: 1rem !important;
        padding: 0.75rem !important;
        border-radius: 8px !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Extensions help text mobile */
    .filter-rule-item .form-text[b-goh01nakzb] {
        font-size: 0.8rem !important;
        line-height: 1.4 !important;
        margin-top: 0.5rem !important;
        opacity: 0.8 !important;
    }
    
    /* Button mobile optimizations within modal */
    .backup-settings-modal .btn[b-goh01nakzb] {
        font-size: 0.875rem !important;
        padding: 0.625rem 1rem !important;
    }
    
    .backup-settings-modal .modal-footer .btn[b-goh01nakzb] {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    /* Schedule components mobile optimization */
    .schedules-section[b-goh01nakzb] {
        padding: 0.75rem !important;
        margin-top: 1rem !important;
    }
    
    .schedule-item[b-goh01nakzb] {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Schedule controls: put enabled checkbox and delete button on same line */
    .schedule-controls[b-goh01nakzb] {
        display: block !important;
        margin-bottom: 0.75rem !important;
    }
    
    /* Create horizontal layout for first row: enabled + delete */
    .schedule-controls .form-check:first-child[b-goh01nakzb] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .schedule-controls .form-check-label[b-goh01nakzb] {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex: 1 !important;
        margin: 0 !important;
    }
    
    /* Position delete button on same line */
    .schedule-controls .btn-danger[b-goh01nakzb] {
        padding: 0.375rem !important; /* Smaller padding */
        font-size: 0.7rem !important; /* Smaller font */
        min-width: 32px !important; /* Smaller width */
        height: 32px !important; /* Smaller height */
        border-radius: 6px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
        position: absolute !important;
        right: 0.75rem !important;
        top: 0.5rem !important; /* Move higher to align with checkbox */
    }
    
    /* Make schedule item relative for absolute positioning */
    .schedule-item[b-goh01nakzb] {
        position: relative !important;
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        border: 1px solid var(--border-color) !important; /* Restore border between schedule cards */
        background: var(--muted-color-light) !important;
        border-radius: 12px !important;
    }
    
    /* Time inputs section - force to next row */
    .schedule-item .time-inputs[b-goh01nakzb] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }
    
    .time-input[b-goh01nakzb] {
        width: 40px !important; /* Reduced from 50px */
        padding: 0.375rem 0.25rem !important; /* Reduced padding */
        font-size: 0.8rem !important; /* Slightly smaller font */
        text-align: center !important;
    }
    
    .days-of-week-section[b-goh01nakzb] {
        padding-top: 0.5rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle separator line */
        margin-top: 0.75rem !important;
    }
    
    .days-selector[b-goh01nakzb] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
    }
    
    .day-checkbox[b-goh01nakzb] {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.75rem !important;
        justify-content: flex-start !important; /* Left align instead of center */
        text-align: left !important; /* Left align text */
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        background: transparent !important; /* Remove background */
        border: none !important; /* Remove border clutter */
        color: var(--text-primary) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .day-checkbox:hover[b-goh01nakzb] {
        background: var(--primary-color-light) !important;
        border-radius: 6px !important;
        color: var(--primary-color) !important;
    }
    
    .day-checkbox input[type="checkbox"][b-goh01nakzb] {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* Section header mobile improvements */
    .section-header[b-goh01nakzb] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin-bottom: 1rem !important;
        padding-bottom: 0.75rem !important;
    }
    
    .section-header h4[b-goh01nakzb] {
        font-size: 1rem !important;
        margin: 0 !important;
    }
    
    /* Add Schedule button mobile optimization */
    .section-header .btn[b-goh01nakzb] {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Form group mobile improvements for schedules */
    .schedules-section .form-group[b-goh01nakzb] {
        margin-bottom: 1rem !important;
    }
    
    .schedules-section .form-check-label[b-goh01nakzb] {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        padding-left: 0.25rem !important;
    }
    
    .schedules-section .form-check-input[b-goh01nakzb] {
        margin-top: 0.125rem !important;
        margin-right: 0.5rem !important;
    }
    
    /* Better spacing for enabled checkbox */
    .schedule-controls .form-check[b-goh01nakzb] {
        margin-bottom: 0 !important;
        align-items: flex-start !important;
    }
    
    /* Mobile-specific time input improvements - cleaner design */
    .time-inputs[b-goh01nakzb] {
        background: transparent !important; /* Remove background */
        padding: 0.5rem 0 !important; /* Reduce padding */
        border-radius: 0 !important; /* Remove border radius */
        border: none !important; /* Remove border */
        width: 100% !important;
        justify-content: flex-start !important;
        position: relative !important;
        margin-top: 0.5rem !important;
    }
    
    /* Simpler Time label */
    .time-inputs[b-goh01nakzb]::before {
        content: 'Time:' !important;
        font-size: 0.875rem !important;
        color: var(--text-primary) !important;
        font-weight: 500 !important;
        margin-right: 0.75rem !important;
        background: none !important;
        padding: 0 !important;
        position: static !important;
    }
    
    .time-inputs .time-input[b-goh01nakzb] {
        background: var(--card-background) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 6px !important;
        min-width: 40px !important; /* Reduced from 50px */
        width: 40px !important; /* Fixed width to prevent wrapping */
        padding: 0.375rem 0.25rem !important; /* Reduced padding */
        font-size: 0.8rem !important; /* Slightly smaller font */
        text-align: center !important;
        margin: 0 0.125rem !important; /* Reduced margin between inputs */
    }
    
    .time-inputs .time-input:focus[b-goh01nakzb] {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1) !important;
    }
    
    /* Days of week mobile grid optimization */
    .days-selector[b-goh01nakzb] {
        background: transparent !important; /* Remove background */
        padding: 0 !important; /* Remove padding */
        border-radius: 0 !important; /* Remove border radius */
        border: none !important; /* Remove border */
    }
    
    /* Responsive grid for different screen sizes */
    @media (max-width: 480px) {
        .days-selector[b-goh01nakzb] {
            grid-template-columns: 1fr 1fr !important;
        }
    }
    
    @media (min-width: 481px) and (max-width: 768px) {
        .days-selector[b-goh01nakzb] {
            grid-template-columns: repeat(3, 1fr) !important;
        }
    }
    
    .destinations-section[b-goh01nakzb] {
        padding: 0.75rem;
        margin-top: 1rem;
        max-height: 180px;
    }
    
    .destinations-list[b-goh01nakzb] {
        max-height: 100px;
    }
    
    .destinations-section .section-header[b-goh01nakzb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        position: relative;
        top: auto;
    }
    
    .destination-item[b-goh01nakzb] {
        padding: 0.75rem;
    }
    
    .destination-item .input-group[b-goh01nakzb] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .destination-item .form-control[b-goh01nakzb],
    .destination-item .btn[b-goh01nakzb] {
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    
    .destination-options[b-goh01nakzb] {
        padding: 0.5rem;
    }
    
    .destination-options .form-check-label[b-goh01nakzb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    /* Wizard Progress Mobile Optimization - Compact Single Line */
    .wizard-progress[b-goh01nakzb] {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.75rem !important;
        background: var(--card-background) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 12px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    .wizard-steps[b-goh01nakzb] {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 0.25rem !important;
        margin-bottom: 0.5rem !important;
        position: relative !important;
    }
    
    /* Hide step labels on mobile for compact design */
    .wizard-step[b-goh01nakzb] {
        flex-direction: column !important;
        align-items: center !important;
        flex: none !important;
        position: relative !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        min-width: auto !important;
    }
    
    .wizard-step .step-label[b-goh01nakzb] {
        display: none !important; /* Hide labels to save space */
    }
    
    /* Modern compact step numbers */
    .step-number[b-goh01nakzb] {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
        margin: 0 !important;
        border: 2px solid var(--border-color) !important;
        background: var(--bg-primary) !important;
        color: var(--text-muted) !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        position: relative !important;
        z-index: 3 !important;
    }
    
    /* Active step styling */
    .wizard-step.active .step-number[b-goh01nakzb] {
        background: var(--primary-color) !important;
        border-color: var(--primary-color) !important;
        color: white !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
        transform: scale(1.1) !important;
    }
    
    /* Completed step styling */
    .wizard-step.completed .step-number[b-goh01nakzb] {
        background: var(--success-color) !important;
        border-color: var(--success-color) !important;
        color: white !important;
        font-size: 0.65rem !important;
    }
    
    /* Replace number with checkmark for completed steps */
    .wizard-step.completed .step-number[b-goh01nakzb]::after {
        content: '\f00c' !important;
        font-family: 'Font Awesome 5 Free' !important;
        font-weight: 900 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .wizard-step.completed .step-number[b-goh01nakzb] {
        font-size: 0 !important; /* Hide the number */
    }
    
    /* Modern connecting lines between steps */
    .wizard-step:not(:last-child)[b-goh01nakzb]::after {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: calc(100% + 2px) !important;
        right: calc(-100% + 26px) !important;
        height: 2px !important;
        background: var(--border-color) !important;
        z-index: 1 !important;
        border-radius: 1px !important;
        transition: background-color 0.3s ease !important;
        transform: translateY(-50%) !important;
    }
    
    /* Completed connection lines */
    .wizard-step.completed:not(:last-child)[b-goh01nakzb]::after {
        background: var(--success-color) !important;
    }
    
    /* Progress bar - more compact */
    .wizard-progress-bar[b-goh01nakzb] {
        height: 2px !important;
        margin-top: 0.5rem !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 1px !important;
        overflow: hidden !important;
    }
    
    .progress-fill[b-goh01nakzb] {
        height: 100% !important;
        background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light)) !important;
        border-radius: 1px !important;
        transition: width 0.4s ease !important;
    }
    
    /* Wizard Step Content Mobile Optimization */
    .wizard-step-content .schedules-section[b-goh01nakzb] {
        padding: 0.75rem !important;
        margin-top: 1rem !important;
    }
    
    .wizard-step-content .schedule-item[b-goh01nakzb] {
        padding: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        position: relative !important;
        border: 1px solid var(--border-color) !important;
        background: var(--muted-color-light) !important;
        border-radius: 12px !important;
    }
    
    /* Wizard schedule controls mobile layout */
    .wizard-step-content .schedule-controls[b-goh01nakzb] {
        display: block !important;
        margin-bottom: 0.75rem !important;
    }
    
    .wizard-step-content .schedule-controls .form-check-label[b-goh01nakzb] {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Wizard delete button positioning */
    .wizard-step-content .schedule-controls .btn-danger[b-goh01nakzb] {
        position: absolute !important;
        top: 0.75rem !important;
        right: 0.75rem !important;
        padding: 0.375rem !important;
        font-size: 0.7rem !important;
        min-width: 32px !important;
        height: 32px !important;
        border-radius: 6px !important;
    }
    
    /* Wizard time inputs - compact mobile layout */
    .wizard-step-content .time-inputs[b-goh01nakzb] {
        background: transparent !important;
        padding: 0.5rem 0 !important;
        border: none !important;
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 0.5rem !important;
        display: flex !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }
    
    .wizard-step-content .time-inputs[b-goh01nakzb]::before {
        content: 'Time:' !important;
        font-size: 0.875rem !important;
        color: var(--text-primary) !important;
        font-weight: 500 !important;
        margin-right: 0.5rem !important;
    }
    
    .wizard-step-content .time-inputs .form-control[b-goh01nakzb] {
        background: var(--card-background) !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 6px !important;
        width: 35px !important;
        padding: 0.25rem 0.125rem !important;
        font-size: 0.8rem !important;
        text-align: center !important;
        margin: 0 !important;
    }
    
    .wizard-step-content .time-inputs span[b-goh01nakzb] {
        color: var(--text-primary) !important;
        font-weight: 500 !important;
        font-size: 0.875rem !important;
        margin: 0 0.125rem !important;
    }
    
    /* Wizard days section mobile */
    .wizard-step-content .days-of-week-section[b-goh01nakzb] {
        padding-top: 0.5rem !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        margin-top: 0.75rem !important;
    }
    
    .wizard-step-content .days-selector[b-goh01nakzb] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
        background: transparent !important;
        padding: 0 !important;
        border: none !important;
    }
    
    .wizard-step-content .day-checkbox[b-goh01nakzb] {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.75rem !important;
        justify-content: flex-start !important;
        text-align: left !important;
        min-height: 40px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0.375rem !important;
        background: transparent !important;
        border: none !important;
        color: var(--text-primary) !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
    }
    
    .wizard-step-content .day-checkbox:hover[b-goh01nakzb] {
        background: var(--primary-color-light) !important;
        border-radius: 6px !important;
        color: var(--primary-color) !important;
    }
    
    /* MinSize Rule Input Group - Inline Layout */
    .size-input-group[b-goh01nakzb] {
        display: flex !important;
        gap: 0.5rem !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    .size-input-group input[type="number"][b-goh01nakzb] {
        flex: 1 !important;
        min-width: 0 !important;
    }
    
    .size-input-group select[b-goh01nakzb] {
        flex: none !important;
        width: auto !important;
        min-width: 60px !important;
        max-width: 80px !important;
    }
    
    /* Hide ApplyToFolder checkbox for MinSize rules - doesn't make sense for folders */
    .filter-rule-item:has(.size-input-group) .apply-folder-check[b-goh01nakzb] {
        display: none !important;
    }
    
    /* Wizard Modal Mobile Optimization */
    .backup-settings-modal[b-goh01nakzb] {
        width: 98vw !important;
        max-width: 98vw !important;
        height: 95vh !important;
        max-height: 95vh !important;
        margin: 1rem auto !important;
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
    }
    
    .backup-settings-modal .modal-header[b-goh01nakzb] {
        padding: 0.75rem 1rem !important;
    }
    
    .backup-settings-modal .modal-header h3[b-goh01nakzb] {
        font-size: 1rem !important;
        line-height: 1.3 !important;
    }
    
    .backup-settings-modal .modal-body[b-goh01nakzb] {
        padding: 0.75rem 1rem !important;
        max-height: calc(95vh - 160px) !important;
        overflow-y: auto !important;
    }
    
    /* Wizard Destinations Section Mobile Optimization */
    .destinations-section[b-goh01nakzb] {
        padding: 0.75rem !important;
        margin-top: 0.75rem !important;
        max-height: none !important; /* Remove height restriction */
        overflow-y: visible !important;
        border-radius: 8px !important;
    }
    
    .destinations-section .section-header[b-goh01nakzb] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
        margin-bottom: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        position: static !important;
    }
    
    .destinations-section .section-header label[b-goh01nakzb] {
        font-size: 1rem !important;
        justify-content: flex-start !important;
    }
    
    .destinations-section .section-header .btn[b-goh01nakzb] {
        width: 100% !important;
        justify-content: center !important;
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
    }
    
    .destinations-list[b-goh01nakzb] {
        max-height: none !important; /* Remove height restriction */
        overflow-y: visible !important;
        padding-right: 0 !important;
    }
    
    /* Destination Item Mobile Layout */
    .destination-item[b-goh01nakzb] {
        padding: 0.75rem !important;
        margin-bottom: 0 !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        position: relative !important;
        border-bottom: 1px solid var(--border-color) !important;
    }
    
    /* Remove border from last destination item */
    .destination-item:last-child[b-goh01nakzb] {
        border-bottom: none !important;
    }
    
    .destination-item .input-group[b-goh01nakzb] {
        flex-direction: row !important;
        gap: 0 !important;
        margin-bottom: 0.75rem !important;
        align-items: stretch !important;
    }
    
    .destination-item .form-control[b-goh01nakzb] {
        border-radius: 8px 0 0 8px !important;
        border: 1px solid var(--border-color) !important;
        border-right: none !important;
        padding: 0.75rem !important;
        font-size: 1rem !important;
        flex: 1 !important;
        margin-bottom: 0 !important;
    }
    
    /* Smaller destination action buttons for more input space */
    .destination-item .input-group .btn[b-goh01nakzb] {
        border-radius: 0 !important;
        border: 1px solid var(--border-color) !important;
        border-left: none !important;
        padding: 0.75rem 0.625rem !important;
        font-size: 0.875rem !important;
        width: auto !important;
        min-width: 40px !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }
    
    /* Round the last button's right corners */
    .destination-item .input-group .btn:last-child[b-goh01nakzb] {
        border-radius: 0 8px 8px 0 !important;
    }
    
    .destination-item .btn-outline-secondary[b-goh01nakzb] {
        background: var(--primary-color-light) !important;
        border-color: var(--border-color) !important;
        color: var(--primary-color) !important;
    }
    
    .destination-item .btn-outline-danger[b-goh01nakzb] {
        background: var(--danger-color-light) !important;
        border-color: var(--border-color) !important;
        color: var(--danger-color) !important;
    }
    
    .destination-item .btn:hover[b-goh01nakzb] {
        transform: none !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    .destination-options[b-goh01nakzb] {
        padding: 0.75rem 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        border: none !important;
        margin-top: 0.5rem !important;
    }
    
    .destination-options .form-check-label[b-goh01nakzb] {
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.5rem !important;
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
    }
    
    .destination-options .form-check-input[b-goh01nakzb] {
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    /* No destinations message mobile */
    .no-destinations-message[b-goh01nakzb] {
        padding: 1rem !important;
        font-size: 0.875rem !important;
        text-align: center !important;
        background: transparent !important;
        border: none !important;
        border-radius: 0 !important;
        margin: 0.5rem 0 !important;
        color: var(--text-muted) !important;
    }
}

/* Animation for destination items */
@keyframes slideInDestination-b-goh01nakzb {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.destination-item[b-goh01nakzb] {
    animation: slideInDestination-b-goh01nakzb 0.3s ease-out;
}

/* Focus styles for accessibility */
.destination-item .btn:focus[b-goh01nakzb],
.destination-options .form-check-input:focus[b-goh01nakzb] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Clean Backup Actions Layout */
.backup-actions[b-goh01nakzb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.backup-actions .btn[b-goh01nakzb] {
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.backup-actions .btn:hover[b-goh01nakzb] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Confirmation Modal Styles */
.confirm-modal[b-goh01nakzb] {
    max-width: 480px;
    width: 90%;
}

.confirm-message[b-goh01nakzb] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 193, 7, 0.08);
    border-left: 4px solid var(--warning-color);
    border-radius: 6px;
}

.confirm-message i[b-goh01nakzb] {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.confirm-message p[b-goh01nakzb] {
    margin: 0;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.backup-info[b-goh01nakzb] {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.backup-info label[b-goh01nakzb] {
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
    font-size: 0.9rem;
}

.backup-path[b-goh01nakzb] {
    font-family: 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', monospace;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    word-break: break-all;
    display: block;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.confirm-remove-btn[b-goh01nakzb] {
    font-weight: 500;
}

/* Responsive adjustments for backup actions */
@media (max-width: 768px) {
    .backup-actions[b-goh01nakzb] {
        flex-wrap: wrap;
        gap: 0.25rem;
        overflow: visible; /* Remove height restriction to prevent cutoff */
    }
    
    .backup-actions .btn[b-goh01nakzb] {
        flex: 0 0 calc(50% - 0.125rem); /* 2 buttons per row with gap consideration */
        min-width: 0;
        white-space: nowrap;
        font-size: 0.85rem;
        padding: 0.4rem 0.6rem;
        text-overflow: ellipsis;
        overflow: hidden;
        border: none !important; /* Remove all borders */
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); /* Use shadow instead of border */
    }
    
    .backup-actions .btn:hover[b-goh01nakzb] {
        transform: none; /* Remove transform to prevent layout issues */
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    }
}

/* Destination Controls */
.destination-controls-compact[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.destination-toggle-compact[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    flex: 1;
}

.destination-checkbox[b-goh01nakzb] {
    margin: 0;
}

.destination-status-text[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.destination-status-text.enabled[b-goh01nakzb] {
    color: var(--success-color);
}

.destination-status-text.disabled[b-goh01nakzb] {
    color: var(--text-muted);
}

/* Backup Status Panel */
.backup-status-panel[b-goh01nakzb] {
    margin-top: 1rem;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    animation: slideDown-b-goh01nakzb 0.3s ease-out;
}

.status-panel-header[b-goh01nakzb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.status-panel-header h4[b-goh01nakzb] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.status-panel-actions[b-goh01nakzb] {
    display: flex;
    gap: 0.5rem;
}

.status-panel-content[b-goh01nakzb] {
    padding: 1rem;
}

/* Status Overview */
.status-overview[b-goh01nakzb] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.status-item[b-goh01nakzb] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.status-icon[b-goh01nakzb] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.status-icon.running[b-goh01nakzb] {
    background: var(--info-color-light);
    color: var(--info-color);
}

.status-icon.completed[b-goh01nakzb] {
    background: var(--success-color-light);
    color: var(--success-color);
}

.status-icon.failed[b-goh01nakzb], .status-icon.error[b-goh01nakzb] {
    background: var(--danger-color-light);
    color: var(--danger-color);
}

.status-icon.scheduled[b-goh01nakzb], .status-icon.idle[b-goh01nakzb] {
    background: var(--warning-color-light);
    color: var(--warning-color);
}

.status-icon.watching[b-goh01nakzb] {
    background: var(--success-color-light);
    color: var(--success-color);
}

.status-icon.disabled[b-goh01nakzb] {
    background: var(--text-muted-light);
    color: var(--text-muted);
}

.status-details[b-goh01nakzb] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.status-label[b-goh01nakzb] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-value[b-goh01nakzb] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.status-message[b-goh01nakzb] {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Destinations Status */
.destinations-status[b-goh01nakzb] {
    margin-bottom: 1.5rem;
}

.destinations-status h5[b-goh01nakzb] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.destinations-status-list[b-goh01nakzb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.destination-status-item[b-goh01nakzb] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.destination-path[b-goh01nakzb] {
    font-size: 0.85rem;
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    word-break: break-all;
}

.destination-info[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.destination-enabled[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.destination-enabled.enabled[b-goh01nakzb] {
    color: var(--success-color);
}

.destination-enabled.disabled[b-goh01nakzb] {
    color: var(--text-muted);
}

.last-backup[b-goh01nakzb] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Status Errors */
.status-errors[b-goh01nakzb] {
    margin-bottom: 0;
}

.status-errors h5[b-goh01nakzb] {
    margin: 0 0 0.75rem 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-list[b-goh01nakzb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.error-item[b-goh01nakzb] {
    padding: 0.75rem;
    background: var(--danger-color-light);
    border: 1px solid var(--danger-color);
    border-radius: 6px;
}

.error-time[b-goh01nakzb] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.error-message[b-goh01nakzb] {
    font-size: 0.85rem;
    color: var(--text-primary);
    word-break: break-word;
}

/* Status Panel Animations */
@keyframes slideDown-b-goh01nakzb {
    from {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
    }
    to {
        opacity: 1;
        transform: translateY(0);
        max-height: 1000px;
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .status-overview[b-goh01nakzb] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    .destination-status-item[b-goh01nakzb] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .destination-info[b-goh01nakzb] {
        width: 100%;
        justify-content: space-between;
    }
    
    .status-panel-header[b-goh01nakzb] {
        padding: 0.75rem;
    }
    
    .status-panel-header h4[b-goh01nakzb] {
        font-size: 0.9rem;
    }
    
    .status-panel-actions .btn[b-goh01nakzb] {
        padding: 0.375rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .status-panel-content[b-goh01nakzb] {
        padding: 0.75rem;
    }
}

@media (max-width: 480px) {
    .backup-actions[b-goh01nakzb] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .backup-status-toggle[b-goh01nakzb] {
        grid-column: span 2;
    }
    
    .status-item[b-goh01nakzb] {
        padding: 0.5rem;
        gap: 0.5rem;
    }
    
    .status-icon[b-goh01nakzb] {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .destination-controls-compact[b-goh01nakzb] {
        flex-direction: column;
        gap: 0.5rem;
        align-items: flex-start;
    }
}
/* /Pages/CloudStorages.razor.rz.scp.css */
/* CloudStorages Page Styles - Logo-Inspired Design */
.content-header[b-pz9o4t78u2] {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e40af 0%, #0ea5e9 50%, #06b6d4 100%);
    border-radius: 16px;
    padding: 2rem;
    color: white;
    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.3);
    position: relative;
    overflow: hidden;
}

.header-content[b-pz9o4t78u2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

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

.header-actions .btn[b-pz9o4t78u2] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.header-actions .btn:hover[b-pz9o4t78u2] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.header-actions .btn:disabled[b-pz9o4t78u2] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.header-actions .btn i[b-pz9o4t78u2] {
    margin-right: 0.5rem;
}

.content-header h1[b-pz9o4t78u2] {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.content-description[b-pz9o4t78u2] {
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.cloudstorages-container[b-pz9o4t78u2] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Summary Stats - Theme-Aware Design */
.cloudstorages-summary[b-pz9o4t78u2] {
    background: var(--card-background);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.cloudstorages-summary[b-pz9o4t78u2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1e40af, #0ea5e9, #06b6d4, #0891b2, #0c4a6e, #1e40af);
}

.summary-stats[b-pz9o4t78u2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
}

.stat-item[b-pz9o4t78u2] {
    text-align: center;
    position: relative;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--bg-secondary);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.stat-item:hover[b-pz9o4t78u2] {
    transform: translateY(-4px);
    background: var(--bg-tertiary);
    box-shadow: var(--shadow);
}

.stat-number[b-pz9o4t78u2] {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #1e40af, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 0 4px 8px rgba(30, 64, 175, 0.3);
    position: relative;
}

.stat-number[b-pz9o4t78u2]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #1e40af, #0ea5e9);
    border-radius: 2px;
}

.stat-label[b-pz9o4t78u2] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Cloud Storage Grid - Ultra-Modern Compact Layout */
.cloudstorages-grid[b-pz9o4t78u2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

/* Cloud Storage Card - Individual Card Design */
.cloudstorage-card[b-pz9o4t78u2] {
    background: var(--card-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    max-width: 600px;
}

.cloudstorage-card:hover[b-pz9o4t78u2] {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
    border-color: rgba(30, 64, 175, 0.3);
}

.cloudstorage-card[b-pz9o4t78u2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    opacity: 0;
}

.cloudstorage-card:hover[b-pz9o4t78u2]::before {
    opacity: 0;
}

/* Card Header - Clean Design */
.card-header[b-pz9o4t78u2] {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #4A90E2 0%, #87CEEB 100%); /* Lighter blue gradient */
    color: white;
    gap: 1rem;
    position: relative;
    flex-shrink: 0;
}

.card-header[b-pz9o4t78u2]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: transparent;
    opacity: 0;
}

.cloudstorage-card:hover .card-header[b-pz9o4t78u2]::before {
    opacity: 0;
    right: 0;
    top: 0;
}

.provider-icon[b-pz9o4t78u2] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.cloudstorage-card:hover .provider-icon[b-pz9o4t78u2] {
    transform: scale(1.05) rotate(3deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.provider-icon img[b-pz9o4t78u2] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.cloudstorage-card:hover .provider-icon img[b-pz9o4t78u2] {
    transform: scale(1.05);
}

.provider-info[b-pz9o4t78u2] {
    flex: 1;
}

.provider-name[b-pz9o4t78u2] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.account-name[b-pz9o4t78u2] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.25rem;
    font-weight: 500;
    opacity: 0.95;
}

.status-indicator[b-pz9o4t78u2] {
    flex-shrink: 0;
}

/* Card Content */
.card-content[b-pz9o4t78u2] {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.no-mount-info[b-pz9o4t78u2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-style: italic;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 1rem;
}

/* Card Actions */
.card-actions[b-pz9o4t78u2] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

.provider-status[b-pz9o4t78u2] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.status-badge[b-pz9o4t78u2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.status-badge.connected[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.status-badge.locked[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.status-badge.locked.clickable[b-pz9o4t78u2] {
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.status-badge.locked.clickable:hover[b-pz9o4t78u2] {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4);
}

.status-badge.locked.clickable:active[b-pz9o4t78u2] {
    transform: scale(0.95);
}

.status-badge[b-pz9o4t78u2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: transparent;
    z-index: -1;
    opacity: 0;
}

.provider-card:hover .status-badge[b-pz9o4t78u2]::before {
    opacity: 0;
}

/* Accounts List - Theme-Aware Design */
.accounts-list[b-pz9o4t78u2] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-secondary);
    max-height: 350px; /* Increased to fully show 2 complete account items */
    overflow-y: auto;
    overflow-x: hidden;
}

.account-item[b-pz9o4t78u2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.account-item[b-pz9o4t78u2]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(135deg, #1e40af, #0ea5e9);
    border-radius: 0 3px 3px 0;
}

.account-item:hover[b-pz9o4t78u2] {
    background: var(--bg-tertiary);
    border-color: rgba(30, 64, 175, 0.4);
    transform: translateX(8px);
    box-shadow: var(--shadow);
}

.account-info[b-pz9o4t78u2] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0; /* Allow shrinking */
    max-width: 220px; /* Increased width to accommodate space info */
}

.account-name[b-pz9o4t78u2] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    /* Text truncation */
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Tooltip styling */
    position: relative;
    cursor: help;
}

.account-name:hover[b-pz9o4t78u2]::after {
    content: attr(title);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow);
    margin-top: 0.5rem;
    animation: fadeIn-b-pz9o4t78u2 0.2s ease;
    /* Ensure tooltip doesn't get cut off */
    min-width: max-content;
    max-width: 300px;
    word-break: break-all;
    white-space: normal;
}

.account-name:hover[b-pz9o4t78u2]::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 1rem;
    z-index: 1001;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--bg-primary);
    margin-top: 0.25rem;
}

/* Space Information Styles */
.space-info[b-pz9o4t78u2] {
    margin-top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.space-item[b-pz9o4t78u2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.space-label[b-pz9o4t78u2] {
    color: var(--text-secondary);
    font-weight: 500;
}

.space-value[b-pz9o4t78u2] {
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.usage-bar[b-pz9o4t78u2] {
    width: 100%;
    height: 4px;
    background: var(--bg-secondary);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.usage-fill[b-pz9o4t78u2] {
    height: 100%;
    transition: width 0.5s ease-in-out, background 0.3s ease-in-out;
}

/* Usage level gradient classes - from green to usage-appropriate color */
.usage-fill.low[b-pz9o4t78u2] {
    background: linear-gradient(90deg, #22c55e 0%, #16a34a 100%); /* Green to darker green - Low usage (0-50%) */
}

.usage-fill.medium[b-pz9o4t78u2] {
    background: linear-gradient(90deg, #22c55e 0%, #eab308 100%); /* Green to yellow - Medium usage (50-80%) */
}

.usage-fill.high[b-pz9o4t78u2] {
    background: linear-gradient(90deg, #22c55e 0%, #f97316 100%); /* Green to orange - High usage (80-90%) */
}

.usage-fill.critical[b-pz9o4t78u2] {
    background: linear-gradient(90deg, #22c55e 0%, #ef4444 100%); /* Green to red - Critical usage (90%+) */
}

.usage-text[b-pz9o4t78u2] {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
    margin-top: 0.25rem;
    font-weight: 500;
}

.space-loading[b-pz9o4t78u2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-style: italic;
}

.space-loading i[b-pz9o4t78u2] {
    color: var(--primary-color);
}

.space-error[b-pz9o4t78u2] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-danger);
    font-size: 0.75rem;
    font-style: italic;
}

.space-error i[b-pz9o4t78u2] {
    color: var(--text-danger);
}

.account-actions[b-pz9o4t78u2] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Modern Button Styles */
.btn[b-pz9o4t78u2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn[b-pz9o4t78u2]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: transparent;
}

.btn:hover[b-pz9o4t78u2]::before {
    left: 0;
}

.btn-sm[b-pz9o4t78u2] {
    padding: 0.375rem;
    font-size: 0.75rem;
    border-radius: 8px;
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline[b-pz9o4t78u2] {
    background: transparent;
    border: 2px solid rgba(30, 64, 175, 0.3);
    color: #1e40af;
    backdrop-filter: blur(10px);
}

.btn-outline:hover[b-pz9o4t78u2] {
    background: rgba(30, 64, 175, 0.1);
    border-color: #1e40af;
    color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 64, 175, 0.3);
}

.btn-primary[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

.btn-secondary[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
}

.btn-secondary:hover[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(107, 114, 128, 0.5);
}

.btn-warning[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.btn-warning:hover[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
}

/* Dark Theme Support for Buttons */
html[data-theme="dark"] .btn-outline[b-pz9o4t78u2] {
    background: transparent;
    border: 2px solid rgba(148, 163, 184, 0.3);
    color: #e2e8f0;
    backdrop-filter: blur(10px);
}

html[data-theme="dark"] .btn-outline:hover[b-pz9o4t78u2] {
    background: rgba(148, 163, 184, 0.15);
    border-color: #94a3b8;
    color: #f1f5f9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(148, 163, 184, 0.3);
}

html[data-theme="dark"] .btn-primary[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: white;
    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
}

html[data-theme="dark"] .btn-primary:hover[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #4338ca, #6d28d9);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 70, 229, 0.5);
}

html[data-theme="dark"] .btn-danger[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    color: white;
    box-shadow: 0 4px 15px rgba(220, 38, 38, 0.4);
}

html[data-theme="dark"] .btn-danger:hover[b-pz9o4t78u2] {
    background: linear-gradient(135deg, #b91c1c, #991b1b);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 38, 38, 0.5);
}

/* Loading State - Theme-Aware Design */
.loading-container[b-pz9o4t78u2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.loading-spinner[b-pz9o4t78u2] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-pz9o4t78u2 1s linear infinite;
    margin-bottom: 1.5rem;
    position: relative;
}

.loading-spinner[b-pz9o4t78u2]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 2px solid transparent;
    border-top: 2px solid #764ba2;
    border-radius: 50%;
    animation: spin-b-pz9o4t78u2 1.5s linear infinite reverse;
}

.loading-container p[b-pz9o4t78u2] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Empty State - Theme-Aware Design */
.empty-state[b-pz9o4t78u2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.empty-icon[b-pz9o4t78u2] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
}

.empty-icon i[b-pz9o4t78u2] {
    font-size: 2rem;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

.empty-state h3[b-pz9o4t78u2] {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.empty-state p[b-pz9o4t78u2] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
    max-width: 400px;
}

/* Custom scrollbar for accounts list */
.accounts-list[b-pz9o4t78u2]::-webkit-scrollbar {
    width: 6px;
}

.accounts-list[b-pz9o4t78u2]::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 3px;
}

.accounts-list[b-pz9o4t78u2]::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 3px;
    transition: background-color 0.2s ease;
}

.accounts-list[b-pz9o4t78u2]::-webkit-scrollbar-thumb:hover {
    background: var(--text-muted);
}

/* Firefox scrollbar */
.accounts-list[b-pz9o4t78u2] {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) var(--bg-secondary);
}

/* Loading State - Theme-Aware Design */
.loading-container[b-pz9o4t78u2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.loading-spinner[b-pz9o4t78u2] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-pz9o4t78u2 1s linear infinite;
    margin-bottom: 1.5rem;
    position: relative;
}

.loading-spinner[b-pz9o4t78u2]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 2px solid transparent;
    border-top: 2px solid #764ba2;
    border-radius: 50%;
    animation: spin-b-pz9o4t78u2 1.5s linear infinite reverse;
}

.loading-container p[b-pz9o4t78u2] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Empty State - Theme-Aware Design */
.empty-state[b-pz9o4t78u2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.empty-icon[b-pz9o4t78u2] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
}

.empty-icon i[b-pz9o4t78u2] {
    font-size: 2rem;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

.empty-state h3[b-pz9o4t78u2] {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.empty-state p[b-pz9o4t78u2] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
    max-width: 400px;
}

/* Responsive Design - Enhanced */
@media (max-width: 768px) {
    .content-header[b-pz9o4t78u2] {
        padding: 1.5rem;
    }
    
    .header-content[b-pz9o4t78u2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .header-actions[b-pz9o4t78u2] {
        width: 100%;
        display: flex;
        flex-direction: row;
        gap: 0.75rem;
    }
    
    .header-actions .btn[b-pz9o4t78u2] {
        flex: 1;
        justify-content: center;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
    
    .content-header h1[b-pz9o4t78u2] {
        font-size: 2rem;
    }
    
    .cloudstorages-grid[b-pz9o4t78u2] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .provider-header[b-pz9o4t78u2] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }
    
    .provider-status[b-pz9o4t78u2] {
        align-self: stretch;
    }
    
    .accounts-list[b-pz9o4t78u2] {
        padding: 0.75rem;
        max-height: 420px; /* Mobile: increased for larger items */
        overflow-y: auto;
        overflow-x: hidden;
    }
    
    .account-item[b-pz9o4t78u2] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
        min-height: 180px; /* Mobile items need even more height */
    }
    
    .account-info[b-pz9o4t78u2] {
        text-align: center;
    }
    
    .account-name[b-pz9o4t78u2] {
        max-width: 100%;
    }
    
    .account-actions[b-pz9o4t78u2] {
        justify-content: center;
    }
    
    .summary-stats[b-pz9o4t78u2] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .content-header[b-pz9o4t78u2] {
        padding: 1.5rem;
    }
    
    .content-header h1[b-pz9o4t78u2] {
        font-size: 2rem;
    }
    
    .account-actions[b-pz9o4t78u2] {
        flex-direction: column;
    }
    
    .btn[b-pz9o4t78u2] {
        justify-content: center;
    }
    
    .account-name[b-pz9o4t78u2] {
        max-width: 120px;
    }
    
    .cloudstorages-grid[b-pz9o4t78u2] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* High-res display optimizations */
@media (min-width: 1400px) {
    .cloudstorages-grid[b-pz9o4t78u2] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 1800px) {
    .cloudstorages-grid[b-pz9o4t78u2] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.75rem;
    }
}

/* Animation Keyframes */
@keyframes fadeIn-b-pz9o4t78u2 {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin-b-pz9o4t78u2 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Pages/Devices.razor.rz.scp.css */
/* Devices Page Styles - CloudStorages-Inspired Design */
.content-header[b-vkcouttopy] {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e40af 0%, #0ea5e9 50%, #06b6d4 100%);
    border-radius: 16px;
    padding: 2rem;
    color: white;
    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.3);
    position: relative;
    overflow: hidden;
}

.header-content[b-vkcouttopy] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

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

.header-actions .btn[b-vkcouttopy] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.header-actions .btn:hover[b-vkcouttopy] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.header-actions .btn:disabled[b-vkcouttopy] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.header-actions .btn i[b-vkcouttopy] {
    margin-right: 0.5rem;
}

.content-header h1[b-vkcouttopy] {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.content-description[b-vkcouttopy] {
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.devices-container[b-vkcouttopy] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Summary Stats - Theme-Aware Design */
.devices-summary[b-vkcouttopy] {
    background: var(--card-background);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.devices-summary[b-vkcouttopy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1e40af, #0ea5e9, #06b6d4, #0891b2, #0c4a6e, #1e40af);
}

.summary-stats[b-vkcouttopy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
}

.stat-item[b-vkcouttopy] {
    text-align: center;
    position: relative;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--bg-secondary);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.stat-item:hover[b-vkcouttopy] {
    transform: translateY(-4px);
    background: var(--bg-tertiary);
    box-shadow: var(--shadow);
}

.stat-number[b-vkcouttopy] {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #1e40af, #0ea5e9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 0 4px 8px rgba(30, 64, 175, 0.3);
    position: relative;
}

.stat-number[b-vkcouttopy]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #1e40af, #0ea5e9);
    border-radius: 2px;
}

.stat-label[b-vkcouttopy] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Devices Grid - Compact Tech Layout */
.devices-grid[b-vkcouttopy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Provider Card - Theme-Aware Design */
.provider-card[b-vkcouttopy] {
    background: var(--card-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow);
    position: relative;
}

.provider-card:hover[b-vkcouttopy] {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12);
    border-color: rgba(30, 64, 175, 0.3);
}

.provider-card[b-vkcouttopy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    opacity: 0;
}

.provider-card:hover[b-vkcouttopy]::before {
    opacity: 0;
}

.provider-card[b-vkcouttopy]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: transparent;
}

.provider-card:hover[b-vkcouttopy]::after {
    left: 0;
}

/* Provider Header - Clean Design */
.provider-header[b-vkcouttopy] {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, #1e40af 0%, #0ea5e9 100%);
    color: white;
    gap: 1rem;
    position: relative;
}

.provider-header[b-vkcouttopy]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    background: transparent;
    opacity: 0;
}

.provider-card:hover .provider-header[b-vkcouttopy]::before {
    opacity: 0;
    right: 0;
    top: 0;
}

.provider-icon[b-vkcouttopy] {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.provider-card:hover .provider-icon[b-vkcouttopy] {
    transform: scale(1.05) rotate(3deg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.provider-icon i[b-vkcouttopy] {
    font-size: 1.5rem;
    color: white;
    transition: transform 0.3s ease;
}

.provider-card:hover .provider-icon i[b-vkcouttopy] {
    transform: scale(1.05);
}

.provider-info[b-vkcouttopy] {
    flex: 1;
}

.provider-name[b-vkcouttopy] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 0.3rem 0;
    color: white;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 2;
}

.provider-status[b-vkcouttopy] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.status-badge[b-vkcouttopy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.status-badge.connected[b-vkcouttopy] {
    background: linear-gradient(135deg, #22c55e, #16a34a);
}

.status-badge.locked[b-vkcouttopy] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.status-badge[b-vkcouttopy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: transparent;
    z-index: -1;
    opacity: 0;
}

.provider-card:hover .status-badge[b-vkcouttopy]::before {
    opacity: 0;
}

/* Accounts List - Theme-Aware Design */
.accounts-list[b-vkcouttopy] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-secondary);
}

.account-item[b-vkcouttopy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    background: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.account-item[b-vkcouttopy]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(135deg, #1e40af, #0ea5e9);
    border-radius: 0 3px 3px 0;
}

.account-item:hover[b-vkcouttopy] {
    background: var(--bg-tertiary);
    border-color: rgba(30, 64, 175, 0.4);
    transform: translateX(8px);
    box-shadow: var(--shadow);
}

.account-info[b-vkcouttopy] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-width: 0; /* Allow shrinking */
    max-width: 160px; /* Limit maximum width */
}

.account-name[b-vkcouttopy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    /* Text truncation */
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Tooltip styling */
    position: relative;
    cursor: help;
}

.account-name:hover[b-vkcouttopy]::after {
    content: attr(title);
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: var(--shadow);
    margin-top: 0.5rem;
    animation: fadeIn-b-vkcouttopy 0.2s ease;
    /* Ensure tooltip doesn't get cut off */
    min-width: max-content;
    max-width: 300px;
    word-break: break-all;
    white-space: normal;
}

.account-name:hover[b-vkcouttopy]::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 1rem;
    z-index: 1001;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid var(--bg-primary);
    margin-top: 0.25rem;
}

.account-actions[b-vkcouttopy] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Modern Button Styles */
.btn[b-vkcouttopy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn[b-vkcouttopy]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    background: transparent;
}

.btn:hover[b-vkcouttopy]::before {
    left: 0;
}

.btn-sm[b-vkcouttopy] {
    padding: 0.375rem;
    font-size: 0.75rem;
    border-radius: 8px;
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline[b-vkcouttopy] {
    background: transparent;
    border: 2px solid rgba(30, 64, 175, 0.3);
    color: #1e40af;
    backdrop-filter: blur(10px);
}

.btn-outline:hover[b-vkcouttopy] {
    background: rgba(30, 64, 175, 0.1);
    border-color: #1e40af;
    color: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 64, 175, 0.3);
}

.btn-primary[b-vkcouttopy] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover[b-vkcouttopy] {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

.btn-secondary[b-vkcouttopy] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 4px 15px rgba(107, 114, 128, 0.4);
}

.btn-secondary:hover[b-vkcouttopy] {
    background: linear-gradient(135deg, #4b5563, #374151);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(107, 114, 128, 0.5);
}

.btn-warning[b-vkcouttopy] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.btn-warning:hover[b-vkcouttopy] {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
}

.btn-danger[b-vkcouttopy] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover[b-vkcouttopy] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5);
}

/* Loading State - Theme-Aware Design */
.loading-container[b-vkcouttopy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.loading-spinner[b-vkcouttopy] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-vkcouttopy 1s linear infinite;
    margin-bottom: 1.5rem;
    position: relative;
}

.loading-spinner[b-vkcouttopy]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 2px solid transparent;
    border-top: 2px solid #764ba2;
    border-radius: 50%;
    animation: spin-b-vkcouttopy 1.5s linear infinite reverse;
}

.loading-container p[b-vkcouttopy] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Empty State - Theme-Aware Design */
.empty-state[b-vkcouttopy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.empty-icon[b-vkcouttopy] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
}

.empty-icon i[b-vkcouttopy] {
    font-size: 2rem;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

.empty-state h3[b-vkcouttopy] {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.empty-state p[b-vkcouttopy] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
    max-width: 400px;
}

/* Responsive Design - Enhanced */
@media (max-width: 768px) {
    .content-header[b-vkcouttopy] {
        padding: 1.5rem;
    }
    
    .header-content[b-vkcouttopy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .header-actions[b-vkcouttopy] {
        width: 100%;
        justify-content: flex-end;
        gap: 0.5rem;
    }
    
    .header-actions .btn[b-vkcouttopy] {
        padding: 0.75rem;
        min-width: 44px;
        justify-content: center;
    }
    
    .header-actions .btn span[b-vkcouttopy] {
        display: none; /* Hide text on mobile */
    }
    
    .header-actions .btn i[b-vkcouttopy] {
        margin-right: 0;
        font-size: 1rem;
    }
    
    .content-header h1[b-vkcouttopy] {
        font-size: 2rem;
    }
    
    .devices-grid[b-vkcouttopy] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .provider-header[b-vkcouttopy] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }
    
    .provider-status[b-vkcouttopy] {
        align-self: stretch;
    }
    
    .accounts-list[b-vkcouttopy] {
        padding: 0.75rem;
    }
    
    .account-item[b-vkcouttopy] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
        padding: 1rem;
    }
    
    .account-info[b-vkcouttopy] {
        text-align: center;
    }
    
    .account-name[b-vkcouttopy] {
        max-width: 100%;
    }
    
    .account-actions[b-vkcouttopy] {
        justify-content: center;
    }
    
    .summary-stats[b-vkcouttopy] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .content-header[b-vkcouttopy] {
        padding: 1.5rem;
    }
    
    .content-header h1[b-vkcouttopy] {
        font-size: 2rem;
    }
    
    .account-actions[b-vkcouttopy] {
        flex-direction: column;
    }
    
    .btn[b-vkcouttopy] {
        justify-content: center;
    }
    
    .account-name[b-vkcouttopy] {
        max-width: 120px;
    }
    
    .devices-grid[b-vkcouttopy] {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* High-res display optimizations */
@media (min-width: 1400px) {
    .devices-grid[b-vkcouttopy] {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 1800px) {
    .devices-grid[b-vkcouttopy] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1.75rem;
    }
}

/* Animation Keyframes */
@keyframes fadeIn-b-vkcouttopy {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin-b-vkcouttopy {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Device Card Styles - Compact Tech Style */
.device-card[b-vkcouttopy] {
    background: var(--card-background);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    height: fit-content;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    max-width: 400px;
}

.device-card[b-vkcouttopy]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(135deg, #1e40af, #0ea5e9);
    border-radius: 0 2px 2px 0;
}

.device-card:hover[b-vkcouttopy] {
    border-color: rgba(30, 64, 175, 0.4);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.device-header[b-vkcouttopy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    gap: 0.75rem;
}

.device-icon[b-vkcouttopy] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: linear-gradient(135deg, #1e40af, #0ea5e9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(30, 64, 175, 0.3);
}

.device-info[b-vkcouttopy] {
    flex: 1;
    min-width: 0;
}

.device-name[b-vkcouttopy] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.125rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.device-type[b-vkcouttopy] {
    font-size: 0.625rem;
    color: var(--text-secondary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.device-status[b-vkcouttopy] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-shrink: 0;
}

.device-details[b-vkcouttopy] {
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}

.detail-row[b-vkcouttopy] {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 0.5rem;
}

.detail-label[b-vkcouttopy] {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--text-secondary);
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-vkcouttopy] {
    font-size: 0.75rem;
    color: var(--text-primary);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    background: var(--bg-secondary);
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    border: 1px solid var(--border-color);
    overflow: visible;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.375rem;
    min-width: 0;
}

.ip-text[b-vkcouttopy] {
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.ip-toggle[b-vkcouttopy] {
    padding: 1px 3px;
    margin: 0;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    transition: color 0.2s ease;
    flex-shrink: 0;
    border-radius: 2px;
}

.ip-toggle:hover[b-vkcouttopy] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.ip-toggle:focus[b-vkcouttopy] {
    outline: 1px solid var(--focus-color);
    outline-offset: 1px;
}

.device-actions[b-vkcouttopy] {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    justify-content: flex-end;
}

.device-actions .btn[b-vkcouttopy] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    font-size: 0.65rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.device-actions .btn i[b-vkcouttopy] {
    font-size: 0.625rem;
}
/* /Pages/Favorites.razor.rz.scp.css */
.favorites-container[b-9dwl0nndg1] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-header[b-9dwl0nndg1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-9dwl0nndg1] {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.page-title i[b-9dwl0nndg1] {
    margin-right: 0.75rem;
    color: var(--primary-color);
}

.view-options[b-9dwl0nndg1] {
    display: flex;
    gap: 0.5rem;
}

.view-btn[b-9dwl0nndg1] {
    background: var(--card-background);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-duration) ease;
}

.view-btn:hover[b-9dwl0nndg1] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-color-light);
}

.view-btn.active[b-9dwl0nndg1] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.files-content[b-9dwl0nndg1] {
    background: var(--card-background);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.files-list[b-9dwl0nndg1] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.file-item[b-9dwl0nndg1] {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-duration) ease;
}

.file-item:hover[b-9dwl0nndg1] {
    background: var(--hover-color);
}

.file-item:last-child[b-9dwl0nndg1] {
    border-bottom: none;
}

.file-icon[b-9dwl0nndg1] {
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.2rem;
    background: var(--icon-background);
    color: var(--icon-color);
}

.file-info[b-9dwl0nndg1] {
    flex: 1;
    min-width: 0;
}

.file-name[b-9dwl0nndg1] {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta[b-9dwl0nndg1] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    gap: 1rem;
}

.files-grid[b-9dwl0nndg1] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

.file-card[b-9dwl0nndg1] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-duration) ease;
    cursor: pointer;
}

.file-card:hover[b-9dwl0nndg1] {
    transform: translateY(-2px);
    box-shadow: var(--hover-shadow);
    border-color: var(--primary-color);
}

.file-card .file-icon[b-9dwl0nndg1] {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    font-size: 2rem;
    border-radius: 12px;
}

.file-card .file-name[b-9dwl0nndg1] {
    font-size: 0.875rem;
    margin: 0;
}

.file-actions[b-9dwl0nndg1] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.empty-state[b-9dwl0nndg1] {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.favorite-toggle[b-9dwl0nndg1] {
    color: var(--warning-color);
    font-size: 1.2rem;
    margin-left: 0.5rem;
    cursor: pointer;
    transition: all var(--transition-duration) ease;
}

.favorite-toggle:hover[b-9dwl0nndg1] {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .favorites-container[b-9dwl0nndg1] {
        padding: 10px;
    }
    
    .page-header[b-9dwl0nndg1] {
        text-align: center;
    }
    
    .view-options[b-9dwl0nndg1] {
        margin-top: 1rem;
    }
}
/* /Pages/Files.razor.rz.scp.css */
/* Global overrides for files page layout */
:global(.content-body:has(.files-page))[b-nf2ltuiaoo] {
    padding: 0 !important;
    margin: 0 !important;
    transform: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Override MainLayout article padding for files page */
:global(.app-content:has(.files-page) article)[b-nf2ltuiaoo] {
    padding-left: 0 !important;
    padding-right: 0 !important;
    transform: none !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
}

/* Files Layout - Container for files and properties panel */
.files-layout[b-nf2ltuiaoo] {
    display: flex;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    transform: none;
}

/* Files Container - Flexbox layout */
.files-container[b-nf2ltuiaoo] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    max-height: calc(100vh - var(--header-height));
    overflow: hidden;
    margin: 0;
    padding: 0;
    flex: 1;
    min-width: 0; /* Allow shrinking */
}

/* Bottom status bar */
.files-statusbar[b-nf2ltuiaoo] {
    position: sticky; /* sticks to bottom of files-container while content scrolls */
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.35rem 0.75rem; /* reduce vertical height on desktop */
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
     /* Keep above file items (z-index ~200) but below any modal/backdrop layers
         Bootstrap modal/backdrop: ~1050, custom overlays: >=1050, Offline Manager: 1200
         Place statusbar under them so it dims/blurs consistently */
     z-index: 980;
    flex-shrink: 0; /* don't shrink in flex layout */
}

.files-statusbar .status-group[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 0;
}

/* Compact status text that can truncate if space is tight */
.files-statusbar .status-text[b-nf2ltuiaoo] {
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.files-statusbar .status-group.right[b-nf2ltuiaoo] {
    margin-left: auto;
}

.files-statusbar .status-label[b-nf2ltuiaoo] {
    color: var(--text-muted);
}

/* Ensure the new items-per-page label is visible and doesn't collapse in flex */
.files-statusbar .items-per-page-label[b-nf2ltuiaoo] {
    display: inline-block;
    color: var(--text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
    flex: 0 0 auto; /* don't let flexbox shrink it to zero */
}

.files-statusbar .status-value[b-nf2ltuiaoo] {
    color: var(--text-primary);
}

.files-statusbar .status-bytes[b-nf2ltuiaoo] {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.files-statusbar .status-sep[b-nf2ltuiaoo] {
    color: var(--border-color);
}

.files-statusbar .pagination-controls .btn[b-nf2ltuiaoo] {
    border: 1px solid var(--border-color) !important;
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}

.files-statusbar .page-size-select[b-nf2ltuiaoo] {
    width: auto;
    min-width: 90px;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-color: var(--border-color);
    height: 28px; /* slightly shorter to reduce bar height */
    line-height: 1.2;
    border-radius: 6px;
    padding-right: 0.75rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none !important; /* prevent double chevron */
}

.files-statusbar .pagination-info[b-nf2ltuiaoo] {
    margin-left: auto;
}

.files-statusbar .pagination-controls[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap; /* keep everything on one line on desktop */
}

.files-statusbar .pagination-page-indicator[b-nf2ltuiaoo] {
    color: var(--text-secondary);
    min-width: 48px;
    text-align: center;
    white-space: nowrap; /* never wrap page indicator like 1 / 4 */
}

.files-statusbar .pagination-controls .btn-group .btn[b-nf2ltuiaoo] {
    height: 26px; /* compact buttons to further reduce bar height */
    padding: 0.15rem 0.5rem;
}

/* Go-to-page input aligns with buttons */
.files-statusbar .page-jump[b-nf2ltuiaoo] {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}
.files-statusbar .page-jump .page-input[b-nf2ltuiaoo] {
    width: 64px;
    max-width: 80px;
    height: 26px; /* match reduced button/select height */
    line-height: 1.2;
    text-align: center;
    padding: 0 0.5rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

@media (max-width: 768px) {
    .files-statusbar[b-nf2ltuiaoo] {
        padding: 0.45rem 0.75rem;
        font-size: 0.8rem;
        gap: 0.5rem;
    }
    .files-statusbar .status-label[b-nf2ltuiaoo] { display: none; }
    .files-statusbar .status-sep[b-nf2ltuiaoo] { display: inline-block; }
    .files-statusbar .status-group[b-nf2ltuiaoo] { min-width: 0; }
    .files-statusbar .status-text[b-nf2ltuiaoo] {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;       /* allow wrapping on mobile */
        overflow: visible;         /* don't clip */
        text-overflow: clip;       /* no ellipsis */
        word-break: break-word;    /* break long tokens if needed */
        line-height: 1.2;
    }
}

/* iOS Safari safe-area adjustments: keep statusbar visible above the home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .files-layout .files-statusbar[b-nf2ltuiaoo] {
        padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
        bottom: env(safe-area-inset-bottom); /* lift above iOS home indicator */
    }
    /* Ensure scrollable area doesn't hide behind the statusbar on iOS */
    .files-layout .files-content[b-nf2ltuiaoo] {
        padding-bottom: calc(56px + env(safe-area-inset-bottom)); /* 56px ~ statusbar height on mobile */
    }
}

/* Prefer dynamic viewport units where supported (helps mobile toolbars) */
@supports (height: 100dvh) {
    .files-layout[b-nf2ltuiaoo] {
        height: 100dvh;
        max-height: 100dvh;
    }
    .files-container[b-nf2ltuiaoo] {
        height: calc(100dvh - var(--header-height));
        max-height: calc(100dvh - var(--header-height));
    }
}

/* Last-resort iOS WebKit fallback: force fixed footer if sticky misbehaves within overflow containers */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 768px) {
        .files-layout .files-statusbar[b-nf2ltuiaoo] {
            position: fixed;
            left: 0;
            right: 0;
            bottom: env(safe-area-inset-bottom);
            width: 100%;
        }
        /* Add bottom space so content doesn't go behind the fixed bar */
        .files-layout .files-content[b-nf2ltuiaoo] {
            padding-bottom: calc(64px + env(safe-area-inset-bottom));
        }
    }
}

/* Splitter between files and properties */
.splitter[b-nf2ltuiaoo] {
    width: 4px;
    background: var(--border-color);
    cursor: col-resize;
    position: relative;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.splitter:hover[b-nf2ltuiaoo] {
    background: var(--primary-color);
}

.splitter-handle[b-nf2ltuiaoo] {
    position: absolute;
    width: 12px;
    height: 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.splitter:hover .splitter-handle[b-nf2ltuiaoo] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

@media (max-width: 768px) {
    .splitter[b-nf2ltuiaoo] {
        display: none;
    }
}

/* =========================================
   Modern Files Header - Two Row Design
   ========================================= */

.files-header[b-nf2ltuiaoo] {
    background: var(--bg-primary);
    position: sticky;
    top: 0; /* Position at top of files container */
    z-index: 999; /* Lower than Bootstrap dropdown z-index (1000) */
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-bottom: 1px solid var(--border-color);
}

/* Header Rows */
.header-row[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    gap: 0.75rem; /* Reduced gap to save space */
    min-height: 56px;
}

.header-navigation[b-nf2ltuiaoo] {
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-secondary);
}

.header-controls[b-nf2ltuiaoo] {
    background: var(--bg-primary);
    overflow: visible; /* Allow dropdown menus to display properly */
}

/* Header buttons should be clean without borders */
.header-status-section .btn[b-nf2ltuiaoo] {
    border: none !important;
    background: transparent !important;
    padding: 0.5rem 1rem !important;
    border-radius: 6px !important;
    transition: background-color 0.2s ease !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.header-status-section .btn:hover[b-nf2ltuiaoo] {
    background: var(--bg-hover) !important;
}

.header-status-section .btn-outline-primary[b-nf2ltuiaoo] {
    color: var(--primary-color) !important;
}

.header-status-section .btn-outline-danger[b-nf2ltuiaoo] {
    color: #ef4444 !important;
}

.header-status-section .btn-outline-warning[b-nf2ltuiaoo] {
    color: #f59e0b !important;
}

.header-status-section .btn-outline-info[b-nf2ltuiaoo] {
    color: #3b82f6 !important;
}

.header-status-section .btn-outline-success[b-nf2ltuiaoo] {
    color: #10b981 !important;
}

/* =========================================
   Navigation Row (Top)
   ========================================= */

.header-nav-section[b-nf2ltuiaoo] {
    flex: 1;
    min-width: 0;
    max-width: 100%; /* Allow full width by default when it's the only section */
}

/* When the navigation row contains multiple sections, limit nav section width */
.header-navigation > .header-nav-section:not(:only-child)[b-nf2ltuiaoo] {
    max-width: 50%;
}

.header-search-section[b-nf2ltuiaoo] {
    flex: 0 0 300px;
    max-width: 400px;
    margin-left: auto;
}

.header-actions-section[b-nf2ltuiaoo] {
    flex: 0 0 auto;
    display: flex;
    gap: 0.75rem;
}

/* Search Container */
.search-container[b-nf2ltuiaoo] {
    position: relative;
    width: 100%;
}

.search-icon[b-nf2ltuiaoo] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.875rem;
    z-index: 1;
}

.search-input[b-nf2ltuiaoo] {
    width: 100%;
    padding: 0.5rem 2.5rem 0.5rem 2.25rem;
    border: 1px solid var(--border-color);
    border-radius: 20px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.search-input:focus[b-nf2ltuiaoo] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.search-input[b-nf2ltuiaoo]::placeholder {
    color: var(--text-muted);
}

.search-clear[b-nf2ltuiaoo] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.search-clear:hover[b-nf2ltuiaoo] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

/* =========================================
   Controls Row (Bottom)
   ========================================= */

.header-status-section[b-nf2ltuiaoo] {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 0.25rem; /* Reduced gap to save space */
    min-width: 0; /* Allow shrinking when needed */
    overflow: visible; /* Allow dropdown menus to display properly */
    margin-right: 0.5rem; /* Add margin to prevent overlap with view section */
}

.header-view-section[b-nf2ltuiaoo] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.375rem; /* Reduced from 0.5rem to 0.375rem */
    min-width: 140px; /* Reduced from 160px to 140px */
}

/* Selection Status */
.selection-status[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 0.875rem;
}

.selection-icon[b-nf2ltuiaoo] {
    color: var(--primary-color);
}

.selection-count[b-nf2ltuiaoo] {
    color: var(--primary-color);
}

/* Selection Actions */
.selection-actions[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* Reduced gap to save space */
}

.selection-actions .btn[b-nf2ltuiaoo] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary);
    transition: background-color 0.2s ease;
    white-space: nowrap !important; /* Prevent text wrapping */
    flex-shrink: 0 !important; /* Don't shrink buttons */
}

/* Clean, modern color scheme for selection actions */
.selection-actions .btn-outline-primary[b-nf2ltuiaoo] {
    background: transparent !important;
    border: none !important;
    color: var(--primary-color);
}

.selection-actions .btn-outline-warning[b-nf2ltuiaoo] {
    background: transparent !important;
    border: none !important;
    color: #f59e0b;
}

.selection-actions .btn-outline-info[b-nf2ltuiaoo] {
    background: transparent !important;
    border: none !important;
    color: #3b82f6;
}

.selection-actions .btn-outline-success[b-nf2ltuiaoo] {
    background: transparent !important;
    border: none !important;
    color: #10b981;
}

.selection-actions .btn-outline-danger[b-nf2ltuiaoo] {
    background: transparent !important;
    border: none !important;
    color: #ef4444;
}

.selection-actions .btn:hover[b-nf2ltuiaoo] {
    background: var(--bg-hover);
}

/* Action Buttons */
.action-buttons[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.25rem; /* Reduced gap to save space */
}

.action-buttons .btn[b-nf2ltuiaoo] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    border: none !important;
    background: transparent !important;
    color: var(--text-primary);
    transition: background-color 0.2s ease;
    white-space: nowrap !important; /* Prevent text wrapping */
    flex-shrink: 0 !important; /* Don't shrink buttons */
}

/* Clean, modern color scheme for action buttons */
.action-buttons .btn-outline-primary[b-nf2ltuiaoo] {
    background: transparent !important;
    border: none !important;
    color: var(--primary-color);
}

.action-buttons .btn-outline-info[b-nf2ltuiaoo] {
    background: transparent !important;
    border: none !important;
    color: #3b82f6;
}

.action-buttons .btn-outline-success[b-nf2ltuiaoo] {
    background: transparent !important;
    border: none !important;
    color: #10b981;
}

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

/* File Count */
.file-count[b-nf2ltuiaoo] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* View Controls */
.view-controls[b-nf2ltuiaoo] {
    display: flex;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-primary);
}

.view-btn[b-nf2ltuiaoo] {
    border: none;
    background: transparent;
    color: var(--text-secondary);
    padding: 0.6rem 1rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0; /* Keep view buttons rectangular */
}

.view-btn:hover[b-nf2ltuiaoo] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.view-btn.active[b-nf2ltuiaoo] {
    background: var(--primary-color);
    color: white;
}

.view-btn:not(:last-child)[b-nf2ltuiaoo] {
    border-right: 1px solid var(--border-color);
}

/* =========================================
   Responsive Header Controls
   ========================================= */

/* Overflow Menu Button */
#overflow-menu[b-nf2ltuiaoo] {
    display: none;
}

.header-controls.responsive #overflow-menu[b-nf2ltuiaoo] {
    display: block;
}

.header-controls.responsive .btn-group[b-nf2ltuiaoo],
.header-controls.responsive .btn[b-nf2ltuiaoo] {
    transition: opacity 0.2s ease;
}

/* Dropdown submenu styles for nested dropdowns */
.dropdown-submenu[b-nf2ltuiaoo] {
    position: relative;
}

.dropdown-submenu > .dropdown-menu[b-nf2ltuiaoo] {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    z-index: 1060; /* Higher than file items (1001) */
}

.dropdown-submenu:hover > .dropdown-menu[b-nf2ltuiaoo] {
    display: block;
}

.dropdown-submenu > .dropdown-toggle[b-nf2ltuiaoo]::after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: var(--text-muted);
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover > .dropdown-toggle[b-nf2ltuiaoo]::after {
    border-left-color: var(--text-primary);
}

/* Handle dropdown positioning on right side of screen */
.dropdown-submenu.dropstart > .dropdown-menu[b-nf2ltuiaoo] {
    left: auto;
    right: 100%;
    margin-left: 0;
    margin-right: -1px;
    border-radius: 6px 0 6px 6px;
}

.dropdown-submenu.dropstart > .dropdown-toggle[b-nf2ltuiaoo]::after {
    display: none;
}

.dropdown-submenu.dropstart > .dropdown-toggle[b-nf2ltuiaoo]::before {
    display: block;
    content: " ";
    float: left;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 5px 5px 0;
    border-right-color: var(--text-muted);
    margin-top: 5px;
    margin-left: -10px;
}

.dropdown-submenu.dropstart:hover > .dropdown-toggle[b-nf2ltuiaoo]::before {
    border-right-color: var(--text-primary);
}

/* Overflow menu specific styles */
#overflow-menu[b-nf2ltuiaoo] {
    display: none;
    margin-left: 0.5rem; /* Increased margin to prevent overlap */
    margin-right: 0.25rem; /* Add right margin for safety */
    flex-shrink: 0; /* Never shrink the overflow button */
}

.header-controls.responsive #overflow-menu[b-nf2ltuiaoo] {
    display: block;
}

#overflow-menu .btn[b-nf2ltuiaoo] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    border: none !important;
    background: transparent !important;
    color: var(--primary-color);
    transition: all 0.2s ease;
    min-width: 44px;
    justify-content: center;
    white-space: nowrap;
    flex-shrink: 0;
}

#overflow-menu .btn:hover[b-nf2ltuiaoo] {
    background: var(--bg-hover) !important;
}

/* Remove Bootstrap's dropdown arrow */
#overflow-menu .btn[b-nf2ltuiaoo]::after {
    display: none !important;
}

#overflow-menu .btn:focus[b-nf2ltuiaoo] {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.3);
}

#overflow-menu .btn i[b-nf2ltuiaoo] {
    font-size: 1rem;
}

/* Make the overflow menu button slightly taller to match other buttons */
#overflow-menu .btn.btn-sm[b-nf2ltuiaoo] {
    padding: 0.5rem 1rem;
    height: auto;
}

#overflow-menu .dropdown-menu[b-nf2ltuiaoo] {
    min-width: 200px;
    max-width: 300px;
    z-index: 1070; /* Higher than file items (1001) and submenus (1060) */
}

/* Override Bootstrap's default z-index for ALL dropdowns */
.dropdown-menu[b-nf2ltuiaoo] {
    z-index: 1090 !important; /* Higher than file items and Bootstrap default */
}

/* Ensure dropdown menus in header are above everything */
.files-header .dropdown-menu[b-nf2ltuiaoo] {
    z-index: 1090 !important; /* Even higher for header dropdowns */
}

/* Most specific override for button group dropdowns */
.files-header .btn-group .dropdown-menu[b-nf2ltuiaoo],
.files-header .action-buttons .dropdown-menu[b-nf2ltuiaoo],
.files-header .selection-actions .dropdown-menu[b-nf2ltuiaoo] {
    z-index: 1100 !important; /* Highest priority */
}

/* Override Bootstrap default with highest specificity */
.files-page .dropdown-menu[b-nf2ltuiaoo],
.files-page .dropdown-menu.show[b-nf2ltuiaoo],
.files-page .btn-group .dropdown-menu[b-nf2ltuiaoo],
.files-page .btn-group .dropdown-menu.show[b-nf2ltuiaoo] {
    z-index: 1100 !important;
}

#overflow-menu .dropdown-item[b-nf2ltuiaoo] {
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    text-decoration: none;
    background: transparent;
    border: none;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
}

#overflow-menu .dropdown-item:hover[b-nf2ltuiaoo] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

#overflow-menu .dropdown-item i[b-nf2ltuiaoo] {
    width: 16px;
    text-align: center;
}

#overflow-menu .dropdown-divider[b-nf2ltuiaoo] {
    margin: 0.5rem 0;
    border-top: 1px solid var(--border-color);
}

/* Responsive header adjustments */
@media (max-width: 1200px) {
    .header-controls.responsive #overflow-menu[b-nf2ltuiaoo] {
        display: block;
    }
}

@media (max-width: 992px) {
    .header-status-section[b-nf2ltuiaoo] {
        gap: 0.5rem;
    }
    
    .action-buttons[b-nf2ltuiaoo] {
        gap: 0.25rem;
    }
    
    .selection-actions[b-nf2ltuiaoo] {
        gap: 0.25rem;
    }
}

@media (max-width: 768px) {
    .header-controls.responsive #overflow-menu[b-nf2ltuiaoo] {
        display: block;
    }
    
    .header-status-section[b-nf2ltuiaoo] {
        gap: 0.125rem; /* Reasonable gap */
        margin-right: 0.375rem; /* Increased margin for mobile */
    }
    
    /* Make overflow menu button reasonably sized */
    #overflow-menu[b-nf2ltuiaoo] {
        margin-left: 0.25rem; /* Reduced margin for mobile but still safe */
        margin-right: 0.125rem; /* Maintain right margin */
    }
    
    #overflow-menu .btn[b-nf2ltuiaoo] {
        padding: 0.375rem; /* Adequate touch target */
        min-width: 40px; /* Adequate touch target */
        border-radius: 8px;
    }
    
    #overflow-menu .btn i[b-nf2ltuiaoo] {
        font-size: 0.875rem; /* Readable icon size */
    }
}

/* Info Button */
.info-btn[b-nf2ltuiaoo] {
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-secondary);
    padding: 0.6rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
}

.info-btn:hover[b-nf2ltuiaoo] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.info-btn.active[b-nf2ltuiaoo] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* =========================================
   Content Styles - Scrollable content area
   ========================================= */

.files-content[b-nf2ltuiaoo] {
    background: var(--bg-primary);
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    /* Ensure proper scrolling behavior - exactly like test HTML */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    /* Enable keyboard focus */
    outline: none;
    /* Ensure this is the only scrolling container */
    position: relative;
    /* Ensure minimum height for overlay positioning */
    min-height: 400px;
}

/* Files content focus indicator */
.files-content:focus[b-nf2ltuiaoo] {
    outline: none !important; /* Remove the big blue border */
}

/* Hide focus outline when not keyboard focused */
.files-content:focus:not(:focus-visible)[b-nf2ltuiaoo] {
    outline: none;
}

/* Remove any default margins from first child in files-content */
.files-content > *:first-child[b-nf2ltuiaoo] {
    margin-top: 0 !important;
}

/* Add padding back to the grid to maintain proper spacing */
.files-grid[b-nf2ltuiaoo] {
    padding: 1.5rem 1.5rem 4rem 1.5rem; /* Increased bottom padding even more */
}

/* =========================================
   Mobile Responsive Design
   ========================================= */

@media (max-width: 768px) {
    .header-row[b-nf2ltuiaoo] {
        padding: 0 0.5rem; /* Reasonable padding for mobile */
        min-height: 48px;
        gap: 0.375rem; /* Reasonable gap */
    }

    /* Add more space between file icon and file info on mobile */
    .files-grid .file-icon[b-nf2ltuiaoo] {
        margin-bottom: 8px; /* Increased from 4px for better mobile spacing */
    }

    /* Navigation Row - Mobile */
    .header-nav-section[b-nf2ltuiaoo] {
        flex: 1;
        min-width: 0;
        max-width: 100%; /* Allow full width on mobile by default */
    }

    /* When the navigation row contains multiple sections on mobile, remove max-width constraint */
    .header-navigation > .header-nav-section:not(:only-child)[b-nf2ltuiaoo] {
        max-width: none;
    }

    .header-search-section[b-nf2ltuiaoo] {
        flex: 0 0 140px; /* Compact but not too small */
        max-width: 180px; /* Reasonable max width */
    }

    .header-actions-section[b-nf2ltuiaoo] {
        flex: 0 0 auto;
    }

    /* Hide button text on mobile */
    .btn-text[b-nf2ltuiaoo] {
        display: none;
    }

    .selection-actions .btn[b-nf2ltuiaoo],
    .action-buttons .btn[b-nf2ltuiaoo] {
        padding: 0.375rem; /* Maintain touch target size */
        min-width: 40px; /* Adequate touch target */
        justify-content: center;
        border-radius: 8px;
    }

    /* Keep view controls properly sized for touch */
    .view-btn[b-nf2ltuiaoo] {
        padding: 0.5rem; /* Maintain touch target size */
        min-width: 40px; /* Adequate touch target */
        border-radius: 0 !important; /* Force rectangular style */
    }
    
    .info-btn[b-nf2ltuiaoo] {
        padding: 0.5rem; /* Maintain touch target size */
        min-width: 40px; /* Adequate touch target */
        border-radius: 6px !important; /* Maintain original rounded corners */
    }
    
    /* Reasonable gaps for mobile */
    .header-status-section[b-nf2ltuiaoo] {
        gap: 0.125rem; /* Small but reasonable gap */
    }
    
    .action-buttons[b-nf2ltuiaoo] {
        gap: 0.125rem; /* Small but reasonable gap */
    }
    
    .selection-actions[b-nf2ltuiaoo] {
        gap: 0.125rem; /* Small but reasonable gap */
    }
    
    /* Reasonable view section spacing */
    .header-view-section[b-nf2ltuiaoo] {
        gap: 0.375rem; /* Reasonable gap */
        min-width: 140px; /* Reasonable minimum */
    }
}

@media (max-width: 576px) {
    .header-row[b-nf2ltuiaoo] {
        padding: 0 0.375rem; /* Reasonable padding */
        gap: 0.25rem; /* Reasonable gap */
    }

    /* Make search bar more compact */
    .header-search-section[b-nf2ltuiaoo] {
        flex: 0 0 100px; /* Compact search bar */
        max-width: 130px; /* Reasonable max width */
    }

    .search-input[b-nf2ltuiaoo] {
        padding: 0.375rem 1.75rem 0.375rem 1.75rem; /* Reasonable padding */
        font-size: 0.8rem; /* Slightly smaller font */
    }

    .search-icon[b-nf2ltuiaoo] {
        left: 8px;
        font-size: 0.8rem;
    }

    .search-clear[b-nf2ltuiaoo] {
        right: 6px;
        padding: 3px;
    }

    /* Keep buttons properly sized for touch */
    .selection-actions .btn[b-nf2ltuiaoo],
    .action-buttons .btn[b-nf2ltuiaoo] {
        padding: 0.375rem; /* Maintain touch target size */
        min-width: 40px; /* Adequate touch target */
        border-radius: 8px;
    }

    .view-btn[b-nf2ltuiaoo] {
        padding: 0.5rem; /* Maintain touch target size */
        min-width: 40px; /* Adequate touch target */
        border-radius: 0 !important; /* Force rectangular style */
    }
    
    .info-btn[b-nf2ltuiaoo] {
        padding: 0.5rem; /* Maintain touch target size */
        min-width: 40px; /* Adequate touch target */
        border-radius: 6px !important; /* Maintain original rounded corners */
    }
    
    /* Reasonable gaps */
    .header-status-section[b-nf2ltuiaoo] {
    /* Standardize Bootstrap modal backdrop within Files page */
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
        gap: 0.0625rem;[b-nf2ltuiaoo] /* Smaller gap to fit more buttons */
    }
    
    .action-buttons[b-nf2ltuiaoo] {
        gap: 0.0625rem; /* Smaller gap to fit more buttons */
    }
    
    .selection-actions[b-nf2ltuiaoo] {
        gap: 0.0625rem; /* Smaller gap to fit more buttons */
    }
}

/* Small screens - focus on search bar optimization */
@media (max-width: 420px) {
    .header-row[b-nf2ltuiaoo] {
        padding: 0 0.25rem; /* Minimal but reasonable padding */
        gap: 0.125rem; /* Tight gap */
    }

    /* Ultra-compact search bar */
    .header-search-section[b-nf2ltuiaoo] {
        flex: 0 0 80px; /* Very compact search bar */
        max-width: 100px; /* Very small max width */
    }
    
    .search-input[b-nf2ltuiaoo] {
        padding: 0.25rem 1.5rem 0.25rem 1.5rem; /* Compact padding */
        font-size: 0.75rem; /* Smaller font */
    }

    .search-icon[b-nf2ltuiaoo] {
        left: 6px;
        font-size: 0.75rem;
    }

    .search-clear[b-nf2ltuiaoo] {
        right: 4px;
        padding: 2px;
    }

    /* Maintain proper button sizes for touch targets */
    .selection-actions .btn[b-nf2ltuiaoo],
    .action-buttons .btn[b-nf2ltuiaoo] {
        padding: 0.3rem; /* Slightly smaller but still touchable */
        min-width: 38px; /* Reasonable touch target */
        border-radius: 6px;
    }

    .view-btn[b-nf2ltuiaoo] {
        padding: 0.4rem; /* Maintain adequate touch target */
        min-width: 38px; /* Reasonable touch target */
        border-radius: 0 !important;
    }
    
    .info-btn[b-nf2ltuiaoo] {
        padding: 0.4rem; /* Maintain adequate touch target */
        min-width: 38px; /* Reasonable touch target */
        border-radius: 6px !important;
    }
    
    /* Tight gaps to maximize button space */
    .header-status-section[b-nf2ltuiaoo] {
        gap: 0.03125rem; /* Tight gap */
    }
    
    .action-buttons[b-nf2ltuiaoo] {
        gap: 0.03125rem; /* Tight gap */
    }
    
    .selection-actions[b-nf2ltuiaoo] {
        gap: 0.03125rem; /* Tight gap */
    }
    
    /* Compact overflow menu */
    #overflow-menu[b-nf2ltuiaoo] {
        margin-left: 0.0625rem;
    }
    
    #overflow-menu .btn[b-nf2ltuiaoo] {
        padding: 0.3rem;
        min-width: 38px;
        border-radius: 6px;
    }
    
    #overflow-menu .btn i[b-nf2ltuiaoo] {
        font-size: 0.8rem;
    }
}

.view-toggle .btn:focus[b-nf2ltuiaoo],
.view-toggle .btn:focus-visible[b-nf2ltuiaoo] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.view-toggle .btn.active[b-nf2ltuiaoo] {
    background: var(--primary-color);
    color: white;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Properties Panel Toggle Button */
.properties-toggle[b-nf2ltuiaoo] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
    padding: 0.375rem 0.75rem;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-radius: 6px;
}

.properties-toggle:hover[b-nf2ltuiaoo] {
    background: var(--bg-hover) !important;
    color: var(--text-primary);
}

.properties-toggle:focus[b-nf2ltuiaoo],
.properties-toggle:focus-visible[b-nf2ltuiaoo] {
    background: var(--bg-hover) !important;
    color: var(--text-primary);
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.properties-toggle.active[b-nf2ltuiaoo] {
    background: var(--primary-color) !important;
    color: white !important;
}

.properties-toggle.active:hover[b-nf2ltuiaoo] {
    background: var(--primary-hover-color) !important;
    color: white !important;
}

/* Backdrop for mobile properties panel */
.properties-backdrop[b-nf2ltuiaoo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.properties-backdrop.visible[b-nf2ltuiaoo] {
    opacity: 1;
    pointer-events: auto;
}

/* Grid View Styles - Dynamic layout with consistent sizing */
.files-grid[b-nf2ltuiaoo] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    margin: 0;
    padding: 16px 20px 50px 20px; /* Increased bottom padding significantly */
}

.file-card[b-nf2ltuiaoo] {
    background: var(--card-background);
    border: none;
    padding: 6px 4px 12px 4px; /* Reduced padding for more compact layout */
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;      /* vertical centering */
    width: 100%;
    min-width: 0;
    overflow: visible; /* Changed from hidden to visible */
    border-radius: 4px;
    min-height: fit-content; /* Ensure card can expand to fit content */
    z-index: 200; /* Highest layer - file items should be clickable */
    touch-action: manipulation; /* Enable fast taps, prevent double-tap zoom */
    -webkit-touch-callout: none; /* Disable callout on iOS */
    -webkit-user-select: none; /* Disable text selection on touch */
    user-select: none;
}

/* --- Fix for grid view icon centering --- */
.file-card[b-nf2ltuiaoo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    height: 100%;
    box-sizing: border-box;
    width: 100%;
    /* Remove min-height: fit-content; if present */
}

.file-icon[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 4px;
    /* NEW: restrict icon width and center */
    max-width: 64px;      /* or your icon size */
    margin-left: auto;
    margin-right: auto;
}

.file-icon i[b-nf2ltuiaoo], .file-icon svg[b-nf2ltuiaoo], .file-icon img[b-nf2ltuiaoo] {
    display: block;
    margin: 0 auto;
    font-size: 48px;      /* or your icon size */
    width: 48px;          /* match icon size */
    height: 48px;
    color: #f4c542;       /* folder color */
}

.file-info[b-nf2ltuiaoo] {
    width: 100%;
    min-width: 0;
    overflow: visible;
    text-align: center;
    padding: 2px 2px 4px 2px;
    flex-shrink: 0;
    /* Remove flex-grow: 1; */
}

.file-card:hover[b-nf2ltuiaoo] {
    background: var(--bg-secondary);
}

.file-card.selected[b-nf2ltuiaoo] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    border: 1px solid var(--primary-color);
}

/* Focused state for keyboard navigation - same appearance as selected */
.file-card.focused[b-nf2ltuiaoo] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    border: 1px solid var(--primary-color);
}

/* Selected and focused states look identical */
.file-card.focused.selected[b-nf2ltuiaoo] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    border: 1px solid var(--primary-color);
}

/* Waterfall item styles for selection and focus */
.waterfall-item[b-nf2ltuiaoo] {
    position: relative;
    z-index: 200; /* Highest layer - file items should be clickable */
    touch-action: manipulation; /* Enable fast taps, prevent double-tap zoom */
    -webkit-touch-callout: none; /* Disable callout on iOS */
    -webkit-user-select: none; /* Disable text selection on touch */
    user-select: none;
    cursor: pointer;
}

.waterfall-item.selected[b-nf2ltuiaoo] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
}

.waterfall-item.focused[b-nf2ltuiaoo] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
}

/* Selected and focused states look identical */
.waterfall-item.focused.selected[b-nf2ltuiaoo] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
}

/* Play overlay for video files in waterfall view */
.play-overlay[b-nf2ltuiaoo] {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    z-index: 10;
    transition: all 0.2s ease;
    pointer-events: none; /* Allow clicks to pass through */
}

.play-overlay i[b-nf2ltuiaoo] {
    color: white;
    font-size: inherit;
    line-height: 1;
    margin-left: 2px; /* Slight offset to center the triangle shape */
}

.play-overlay:hover[b-nf2ltuiaoo] {
    background: rgba(0, 0, 0, 0.8);
    transform: translate(-50%, -50%) scale(1.05);
}

.file-icon[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 4px;
    /* Remove fixed height! */
}

/* Ensure FontAwesome icons display properly in grid view */
.file-icon i[b-nf2ltuiaoo] {
    display: inline-block;
    line-height: 1;
}

/* File thumbnail styling */
.file-thumbnail[b-nf2ltuiaoo] {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-image[b-nf2ltuiaoo] {
    max-width: 100%;
    max-height: 48px; /* Changed to 48px to match 48x48 icon size */
    width: auto;
    height: auto;
    border-radius: 4px;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
    transition: all 0.15s ease;
}

.file-card:hover .thumbnail-image[b-nf2ltuiaoo] {
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    transform: scale(1.02);
}

.thumbnail-fallback[b-nf2ltuiaoo] {
    display: none;
}

/* Dark mode thumbnail styling */
:global([data-theme="dark"]) .thumbnail-image[b-nf2ltuiaoo] {
    box-shadow: 0 1px 3px rgba(255,255,255,0.1);
}

:global([data-theme="dark"]) .file-card:hover .thumbnail-image[b-nf2ltuiaoo] {
    box-shadow: 0 2px 8px rgba(255,255,255,0.15);
}

/* Grid view file name - compact style */
.files-grid .file-name[b-nf2ltuiaoo] {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: 2px;
    word-break: break-word;
    line-height: 1.2;
    color: var(--text-primary);
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Allow up to 2 lines */
    line-clamp: 2; /* Standard property */
    -webkit-box-orient: vertical;
    min-width: 0;
    width: 100%;
    text-align: center;
    white-space: normal; /* Allow wrapping */
}

.file-details[b-nf2ltuiaoo] {
    font-size: 0.65rem !important;
    line-height: 1.1 !important;
    color: var(--text-secondary) !important;
    margin: 0 !important;
    text-align: center !important;
    /* Ensure better contrast in both light and dark modes */
    opacity: 0.8 !important;
}

/* Improve visibility in dark mode - more specific selectors */
[data-theme="dark"] .file-details[b-nf2ltuiaoo],
.theme-dark .file-details[b-nf2ltuiaoo],
body[data-theme="dark"] .file-details[b-nf2ltuiaoo] {
    color: #e9ecef !important; /* Even lighter gray for better contrast */
    opacity: 1 !important;
}

/* Target file-details in dark theme more aggressively */
:global([data-theme="dark"]) .file-details[b-nf2ltuiaoo] {
    color: #e9ecef !important;
    opacity: 1 !important;
}

.file-details div[b-nf2ltuiaoo] {
    margin: 1px 0 !important; /* Tight spacing between size and date */
    color: inherit !important; /* Inherit color from parent */
}

/* Ensure dark mode styling applies to child divs too */
[data-theme="dark"] .file-details div[b-nf2ltuiaoo],
.theme-dark .file-details div[b-nf2ltuiaoo],
body[data-theme="dark"] .file-details div[b-nf2ltuiaoo] {
    color: #e9ecef !important;
}

:global([data-theme="dark"]) .file-details div[b-nf2ltuiaoo] {
    color: #e9ecef !important;
}
/* ===============================
     Compact mobile status bar tweaks
     =============================== */
@media (max-width: 768px) {
    .files-statusbar[b-nf2ltuiaoo] {
    --statusbar-height: 30px; /* even more compact mobile bar */
        min-height: var(--statusbar-height);
    padding: 2px 8px; /* reduce vertical padding further */
    gap: 4px; /* keep tight spacing */
        font-size: 12px;
    }
    .files-statusbar .status-label[b-nf2ltuiaoo],
    .files-statusbar .page-size-select[b-nf2ltuiaoo] {
        display: none !important;
    }
    /* Explicitly show our compact items-per-page text label on mobile */
    .files-statusbar .items-per-page-label[b-nf2ltuiaoo] {
        display: inline-block !important;
        color: var(--text-muted);
        font-size: 12px;
    }
    .files-statusbar .pagination-page-indicator[b-nf2ltuiaoo] {
        font-variant-numeric: tabular-nums;
        font-weight: 500;
        min-width: 58px; /* reserve more width to avoid wrap */
        white-space: nowrap; /* never wrap "1 / 4" */
    }
    .files-statusbar .btn.btn-sm[b-nf2ltuiaoo] {
        padding: 1px 6px; /* slimmer padding */
        line-height: 1.1;
        height: 24px; /* smaller buttons to reduce overall bar height */
        min-width: 34px; /* keep tap target horizontal size reasonable */
    }
}

/* ===============================
     Mobile Status Details Modal
     =============================== */
.mobile-status-modal-backdrop[b-nf2ltuiaoo] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1105;
}
.mobile-status-modal[b-nf2ltuiaoo] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1110;
    background: var(--bg-primary);
    color: var(--text-primary);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
    max-height: 70dvh;
    overflow: auto;
}
.mobile-status-modal .modal-handle[b-nf2ltuiaoo] {
    width: 36px;
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    margin: 4px auto 10px auto;
}
.mobile-status-modal .modal-section[b-nf2ltuiaoo] {
    margin-bottom: 10px;
}
.mobile-status-modal .modal-row[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap; /* keep label and selector on the same line */
}
.mobile-status-modal .modal-actions[b-nf2ltuiaoo] {
    margin-top: 6px;
}
.mobile-status-modal .pagination-page-indicator[b-nf2ltuiaoo] {
    flex: 0 0 auto; /* don't grow to push siblings */
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap; /* avoid wrapping like "/ 4" on next line */
    min-width: 60px; /* reserve enough width for e.g. 123 / 999 */
}
/* Ensure label doesn't wrap and the selector is compact on mobile modal */
.mobile-status-modal .items-per-page-label[b-nf2ltuiaoo] {
    white-space: nowrap;
    flex: 0 0 auto;
}
.mobile-status-modal .page-size-select[b-nf2ltuiaoo] {
    width: auto;                 /* avoid Bootstrap default 100% width */
    min-width: 120px;            /* small but readable */
    max-width: 60%;              /* don't overtake the row */
    flex: 0 1 160px;             /* allow slight shrink if needed */
}
/* File encryption overlay */
.encryption-overlay[b-nf2ltuiaoo] {
    position: absolute;
    top: 0.35rem;
    left: 0.35rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    background: var(--bg-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    z-index: 10;
}

.file-selection[b-nf2ltuiaoo] {
    position: absolute;
    top: -2px;
    right: -2px;
    color: var(--primary-color);
    font-size: 1rem;
    background: var(--bg-primary);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* List View Styles */
.files-list[b-nf2ltuiaoo] {
    width: 100%;
    padding: 0 0 1rem 0;
}

.list-header[b-nf2ltuiaoo] {
    display: grid;
    grid-template-columns: 60px 2fr 120px 100px 140px; /* Updated to match list-row */
    gap: 16px;
    padding: 12px 16px; /* Restore original padding */
    background: var(--bg-secondary);
    border-radius: 8px;
    margin: 0 0 0 0; /* Remove top and bottom margins, keep horizontal margins */
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
    align-items: center;
    height: 48px; /* Restore original height */
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Add subtle shadow for sticky effect */
    /* Ensure sticky positioning works within the scrolling container */
    flex-shrink: 0;
}

.list-header-cell[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    height: 100%;
}

.list-header-cell.checkbox-cell[b-nf2ltuiaoo] {
    justify-content: center;
}

.list-header-cell.name-cell[b-nf2ltuiaoo] {
    justify-content: flex-start;
}

.list-header-cell.name-cell .d-flex[b-nf2ltuiaoo] {
    gap: 12px; /* Space between Name button and filter */
    align-items: center;
    flex-wrap: nowrap; /* Prevent wrapping */
    width: 100%; /* Take full width of the grid cell */
    height: 100%; /* Take full height for proper vertical centering */
}

/* Specific styles for search container in name cell */
.list-header-cell.name-cell .search-container[b-nf2ltuiaoo] {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1; /* Take remaining space */
    min-width: 0; /* Allow shrinking */
}

.list-header-cell.name-cell[b-nf2ltuiaoo] {
    position: relative; /* For search popup positioning */
    z-index: 10; /* Ensure proper stacking context */
}

.list-header-cell.name-cell .search-input[b-nf2ltuiaoo] {
    width: 100%;
    height: 32px;
    padding: 6px 35px 6px 35px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    box-sizing: border-box;
}

.list-header-cell.name-cell .search-input:focus[b-nf2ltuiaoo] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.list-header-cell.name-cell .search-input[b-nf2ltuiaoo]::placeholder {
    color: var(--text-muted);
}

.list-header-cell.name-cell .search-icon[b-nf2ltuiaoo] {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.875rem;
    z-index: 2;
    pointer-events: none;
}

.list-header-cell.name-cell .search-clear[b-nf2ltuiaoo] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 4px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.list-header-cell.name-cell .search-clear:hover[b-nf2ltuiaoo] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.list-header-cell .btn-link[b-nf2ltuiaoo] {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.list-header-cell .btn-link:hover[b-nf2ltuiaoo] {
    color: var(--primary-color);
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.list-header-cell .btn-link:focus[b-nf2ltuiaoo],
.list-header-cell .btn-link:focus-visible[b-nf2ltuiaoo],
.list-header-cell .btn-link:active[b-nf2ltuiaoo] {
    color: var(--primary-color);
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.list-header-cell .form-check-input[b-nf2ltuiaoo] {
    margin-top: 0;
    margin-bottom: 0;
}

/* Checkbox alignment - ensure header and row checkboxes are identical */
.list-header-cell.checkbox-cell .form-check-input[b-nf2ltuiaoo],
.list-cell.checkbox-cell .form-check-input[b-nf2ltuiaoo] {
    width: 20px;
    height: 20px;
    margin: 0;
    vertical-align: middle;
    position: relative;
    border: 2px solid var(--border-color, #dee2e6);
    background-color: var(--bg-primary, #ffffff);
    border-radius: 4px;
    transition: all 0.15s ease;
}

/* Light theme friendly checkbox styling */
.list-header-cell.checkbox-cell .form-check-input:checked[b-nf2ltuiaoo],
.list-cell.checkbox-cell .form-check-input:checked[b-nf2ltuiaoo] {
    background-color: var(--primary-color, #0d6efd);
    border-color: var(--primary-color, #0d6efd);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

/* Hover state for checkboxes */
.list-header-cell.checkbox-cell .form-check-input:hover[b-nf2ltuiaoo],
.list-cell.checkbox-cell .form-check-input:hover[b-nf2ltuiaoo] {
    border-color: var(--primary-color, #0d6efd);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
}

/* Focus state for checkboxes */
.list-header-cell.checkbox-cell .form-check-input:focus[b-nf2ltuiaoo],
.list-cell.checkbox-cell .form-check-input:focus[b-nf2ltuiaoo] {
    border-color: var(--primary-color, #0d6efd);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 13, 110, 253), 0.2);
    outline: none;
}

/* Ensure all cells have consistent vertical alignment */
.list-header-cell[b-nf2ltuiaoo],
.list-cell[b-nf2ltuiaoo] {
    line-height: 1;
}

/* File icon alignment */
.file-icon-small[b-nf2ltuiaoo] {
    flex-shrink: 0;
    width: 24px; /* Smaller than before but larger than original */
    height: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* Remove margin for perfect centering */
}

/* Make icons larger */
.file-icon-small i[b-nf2ltuiaoo] {
    font-size: 1.1rem; /* Slightly larger than default but not too big */
    line-height: 1;
}

/* File name container improvements */
.file-name-container[b-nf2ltuiaoo] {
    display: flex;
    align-items: center; /* Center alignment for icon and text */
    gap: 10px; /* Reasonable gap for better spacing */
    min-width: 0;
    width: 100%;
    max-width: 100%; /* Ensure it doesn't exceed available space */
    overflow: visible; /* Allow content to determine height */
    padding: 2px 0; /* Restore original padding */
    cursor: pointer; /* Make container clickable for single select */
    transition: background-color 0.15s ease;
}

/* Override hover when hovering over file name itself */
.file-name-container:has(.file-name:hover)[b-nf2ltuiaoo] {
    background-color: transparent;
}

/* Better text alignment */
.size-cell[b-nf2ltuiaoo], .type-cell[b-nf2ltuiaoo], .date-cell[b-nf2ltuiaoo] {
    justify-content: flex-start;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Date cell specific styling to prevent wrapping */
.date-cell[b-nf2ltuiaoo] {
    font-variant-numeric: tabular-nums; /* Use monospace numbers for better alignment */
}

.list-row[b-nf2ltuiaoo] {
    display: grid;
    grid-template-columns: 60px 2fr 120px 100px 140px; /* Keep the larger first column */
    gap: 16px;
    padding: 4px 16px; /* Restore original padding */
    border-radius: 6px;
    transition: all 0.15s ease;
    border: 1px solid transparent;
    align-items: center; /* Ensure perfect center alignment */
    min-height: 32px; /* Restore original height */
    margin-bottom: 2px; /* Add small margin between rows */
    position: relative;
    z-index: 200; /* Highest layer - file items should be clickable */
}

.list-row:hover[b-nf2ltuiaoo] {
    background: var(--bg-secondary);
}

.list-row.selected[b-nf2ltuiaoo] {
    background: var(--bg-secondary);
    border-color: var(--primary-color);
}

/* Focused state for keyboard navigation - same appearance as selected */
.list-row.focused[b-nf2ltuiaoo] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    border-color: var(--primary-color);
}

/* Selected and focused states look identical */
.list-row.focused.selected[b-nf2ltuiaoo] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    border-color: var(--primary-color);
}

.list-cell[b-nf2ltuiaoo] {
    display: flex;
    align-items: center; /* Perfect center alignment for all content */
    font-size: 0.9rem;
    min-height: 24px; /* Consistent minimum height */
    padding: 0; /* Remove all padding for cleaner centering */
    color: var(--text-primary);
}

/* Special styling for checkbox cell */
.list-cell.checkbox-cell[b-nf2ltuiaoo] {
    justify-content: center; /* Center the checkbox horizontally */
}

.checkbox-cell[b-nf2ltuiaoo] {
    justify-content: center;
    align-items: center; /* Perfect checkbox centering */
    padding: 0; /* Remove padding for cleaner centering */
    min-height: 24px; /* Consistent height */
}

.name-cell[b-nf2ltuiaoo] {
    justify-content: flex-start;
    max-width: 100%; /* Ensure it doesn't exceed column width */
    overflow: hidden; /* Prevent overflow beyond column */
    padding: 0; /* Remove padding for cleaner centering */
    min-height: 24px; /* Consistent height */
    display: flex;
    align-items: center; /* Changed from flex-start to center for perfect vertical alignment */
}

.size-cell[b-nf2ltuiaoo], .type-cell[b-nf2ltuiaoo], .date-cell[b-nf2ltuiaoo] {
    justify-content: flex-start;
    white-space: nowrap; /* Prevent text wrapping */
    overflow: hidden;
    text-overflow: ellipsis;
    align-items: center; /* Perfect center alignment */
    padding: 0; /* Remove padding for cleaner centering */
    min-height: 24px; /* Consistent height */
}

.file-name-container[b-nf2ltuiaoo] {
    display: flex;
    align-items: center; /* Changed from flex-start to center for perfect vertical alignment */
    gap: 8px;
    min-width: 0;
    width: 100%;
    height: 100%; /* Take full height of the cell */
    max-width: 100%; /* Ensure it doesn't exceed available space */
    overflow: visible; /* Allow content to determine height */
    flex: 1; /* Take up remaining space in name-cell */
    cursor: pointer; /* Make entire container clickable */
    /* Remove padding since parent cell handles it */
}

.file-name-container .form-check-input[b-nf2ltuiaoo] {
    margin-top: 0; /* Align with text baseline */
    margin-bottom: 0;
    flex-shrink: 0;
}

.file-icon-small[b-nf2ltuiaoo] {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0; /* Remove margin-top to ensure perfect centering */
}

/* List view file name - left aligned and perfectly centered */
.files-list .file-name[b-nf2ltuiaoo] {
    display: inline-block; /* Change from flex: 1 to inline-block */
    font-weight: 500;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1; /* Set to 1 to eliminate any line-height spacing issues */
    text-align: left; /* Left align in list view */
    max-width: 100%; /* Constrain to container width */
    font-size: 0.9rem; /* Slightly larger for list view */
    white-space: normal; /* Allow wrapping */
    overflow: visible; /* Show wrapped text */
    cursor: pointer; /* Show it's clickable for navigation */
    color: var(--text-primary); /* Use same color as other text in list view */
    text-decoration: none;
    border-radius: 2px;
    padding: 2px 4px; /* Increased padding for better click target and centering */
    transition: background-color 0.15s ease;
    vertical-align: middle; /* Ensure text aligns to middle */
    margin: 0 !important; /* Force remove all margins to fix vertical centering */
}

.files-list .file-name:hover[b-nf2ltuiaoo] {
    background-color: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
}

/* List cell hover effects for clickable areas */
.list-cell.size-cell[b-nf2ltuiaoo],
.list-cell.type-cell[b-nf2ltuiaoo],
.list-cell.date-cell[b-nf2ltuiaoo] {
    cursor: pointer;
    transition: background-color 0.15s ease;
}

/* Empty State */
.empty-folder[b-nf2ltuiaoo] {
    text-align: center;
    padding: 60px 20px;
}

.filter-input[b-nf2ltuiaoo] {
    min-width: 120px;
    max-width: 180px;
    font-size: 0.8rem;
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-right: none !important; /* Remove right border to connect with button */
    color: var(--text-primary) !important;
    border-radius: 4px 0 0 4px !important; /* Proper border radius for left side */
    height: 32px !important; /* Ensure consistent height */
}

.filter-input:focus[b-nf2ltuiaoo] {
    background-color: var(--bg-primary) !important;
    border: 1px solid var(--primary-color) !important;
    border-right: none !important; /* Keep right border removed even on focus */
    color: var(--text-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

.filter-input[b-nf2ltuiaoo]::placeholder {
    color: var(--text-muted);
}

.filter-container[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    min-width: 0; /* Allow shrinking */
    flex: 0 0 auto; /* Don't grow, don't shrink, auto width */
    max-width: 200px; /* Limit maximum width */
    margin-left: 0; /* Ensure no extra margin */
}

.filter-container .input-group[b-nf2ltuiaoo] {
    flex: 1;
    min-width: 0;
}

.filter-container .input-group .form-control[b-nf2ltuiaoo] {
    flex: 1;
    min-width: 80px; /* Ensure minimum width */
    height: 32px; /* Fixed height */
    border: 1px solid var(--border-color) !important;
    border-right: none !important; /* Remove right border to connect with button */
    border-radius: 4px 0 0 4px !important; /* Proper border radius for left side */
}

.filter-container .input-group .btn[b-nf2ltuiaoo] {
    flex-shrink: 0;
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    height: 32px; /* Match input height */
    border: 1px solid var(--border-color) !important;
    border-left: none !important; /* Remove left border to connect with input */
    border-radius: 0 4px 4px 0 !important; /* Proper border radius for right side */
}

/* Override Bootstrap focus/active styles for filter clear button */
.filter-container .input-group .btn:focus[b-nf2ltuiaoo],
.filter-container .input-group .btn:active[b-nf2ltuiaoo],
.filter-container .input-group .btn:focus-visible[b-nf2ltuiaoo] {
    border: 1px solid var(--border-color) !important;
    border-left: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.filter-container .input-group-text[b-nf2ltuiaoo] {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-secondary);
}

/* Fix button focus/active borders - only for Files page content buttons */
.files-container .btn:focus[b-nf2ltuiaoo],
.files-container .btn:active[b-nf2ltuiaoo],
.files-container .btn:focus-visible[b-nf2ltuiaoo],
.files-container .btn.focus[b-nf2ltuiaoo],
.files-container .btn-link:focus[b-nf2ltuiaoo],
.files-container .btn-link:active[b-nf2ltuiaoo],
.files-container .btn-link:focus-visible[b-nf2ltuiaoo],
.files-container .btn-link.focus[b-nf2ltuiaoo],
.files-container .btn-outline-secondary:focus[b-nf2ltuiaoo],
.files-container .btn-outline-secondary:active[b-nf2ltuiaoo],
.files-container .btn-outline-secondary:focus-visible[b-nf2ltuiaoo],
.files-container .btn-outline-secondary.focus[b-nf2ltuiaoo] {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Ensure no ugly borders on any buttons in the files page */
[b-nf2ltuiaoo] .btn:focus,
[b-nf2ltuiaoo] .btn:active,
[b-nf2ltuiaoo] .btn:focus-visible,
[b-nf2ltuiaoo] .btn.focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Fix filter input border */
.filter-container .input-group .form-control[b-nf2ltuiaoo] {
    flex: 1;
    min-width: 80px; /* Ensure minimum width */
    height: 32px !important; /* Fixed height */
    border: 1px solid var(--border-color) !important;
    border-right: none !important; /* Remove right border to connect with button */
    border-radius: 4px 0 0 4px !important; /* Ensure proper border radius with clear button */
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Ensure filter input focus state has proper border */
.filter-container .input-group .form-control:focus[b-nf2ltuiaoo] {
    border: 1px solid var(--primary-color) !important;
    border-right: none !important; /* Keep right border removed even on focus */
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Specific override for filter input to ensure all borders are visible */
.filter-container .input-group .filter-input[b-nf2ltuiaoo],
.filter-container .input-group .form-control.filter-input[b-nf2ltuiaoo] {
    border-top: 1px solid var(--border-color) !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-left: 1px solid var(--border-color) !important;
    border-right: none !important;
}

.filter-container .input-group .filter-input:focus[b-nf2ltuiaoo],
.filter-container .input-group .form-control.filter-input:focus[b-nf2ltuiaoo] {
    border-top: 1px solid var(--primary-color) !important;
    border-bottom: 1px solid var(--primary-color) !important;
    border-left: 1px solid var(--primary-color) !important;
    border-right: none !important;
}

/* Responsive Design */
@media (max-width: 992px) {
    .files-grid[b-nf2ltuiaoo] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        padding: 14px 16px 40px 16px; /* Increased bottom padding */
    }
    
    .files-list[b-nf2ltuiaoo] {
        padding: 0 1.2rem 3.5rem 1.2rem; /* Increased bottom padding for tablet */
    }
    
    .list-header[b-nf2ltuiaoo],
    .list-row[b-nf2ltuiaoo] {
        grid-template-columns: 60px 2fr 110px 80px 120px; /* Updated first column to match desktop */
        gap: 12px;
        padding: 12px 14px; /* Restore original tablet padding */
    }
    
    .list-header[b-nf2ltuiaoo] {
        margin: 0 0 0 0; /* Adjust margin for tablet */
        height: 48px; /* Restore original tablet height */
    }
    
    .list-row[b-nf2ltuiaoo] {
        min-height: 32px; /* Restore original tablet height */
    }
    
    .filter-input[b-nf2ltuiaoo] {
        font-size: 0.75rem;
    }
    
    .list-header-cell.name-cell .d-flex[b-nf2ltuiaoo] {
        gap: 10px; /* Medium gap on tablet */
    }
    
    .filter-container[b-nf2ltuiaoo] {
        max-width: 160px; /* Medium max width on tablet */
    }
    
    /* No grid mode overrides - use same layout as list view */
}

@media (max-width: 768px) {
    .files-grid[b-nf2ltuiaoo] {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 10px;
        padding: 10px 12px 32px 12px; /* Increased bottom padding */
    }
    
    .files-list[b-nf2ltuiaoo] {
        padding: 0 1rem 3rem 1rem; /* Increased bottom padding for mobile */
    }
    
    .file-name[b-nf2ltuiaoo] {
        font-size: 0.7rem;
        margin: 0; /* Ensure no margins on mobile */
    }
    
    .file-details[b-nf2ltuiaoo] {
        font-size: 0.6rem;
    }
    
    /* Simplified list view for mobile with perfect alignment */
    .list-header[b-nf2ltuiaoo],
    .list-row[b-nf2ltuiaoo] {
        grid-template-columns: 60px 2fr 80px; /* Updated first column to match desktop */
        gap: 12px;
        padding: 12px 12px; /* Restore original mobile padding */
    }
    
    .list-header[b-nf2ltuiaoo] {
        margin: 0 0 0 0; /* Adjust margin for mobile */
        height: 48px; /* Restore original mobile height */
    }
    
    .list-row[b-nf2ltuiaoo] {
        min-height: 32px; /* Restore original mobile height */
    }
    
    .size-cell[b-nf2ltuiaoo] {
        justify-content: flex-end;
    }
    
    .type-cell[b-nf2ltuiaoo],
    .date-cell[b-nf2ltuiaoo] {
        display: none;
    }
    
    .filter-input[b-nf2ltuiaoo] {
        font-size: 0.75rem;
        min-width: 60px !important;
        width: 100%;
        flex: 1 !important;
    }
    
    .list-header-cell.name-cell .d-flex[b-nf2ltuiaoo] {
        gap: 8px; /* Smaller gap on mobile */
        flex-wrap: nowrap; /* Prevent wrapping */
    }
    
    .list-header-cell .btn-link[b-nf2ltuiaoo] {
        white-space: nowrap; /* Prevent text wrapping */
        min-width: fit-content;
        flex-shrink: 0; /* Don't shrink the button */
    }
    
    .filter-container[b-nf2ltuiaoo] {
        max-width: 120px; /* Smaller max width on mobile */
    }
    
    /* No grid mode overrides - use same layout as list view */
}

@media (max-width: 480px) {
    .files-grid[b-nf2ltuiaoo] {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 8px;
        padding: 8px 10px 28px 10px; /* Increased bottom padding */
    }
    
    .file-card[b-nf2ltuiaoo] {
        padding: 4px 2px 8px 2px; /* Even more compact on mobile */
    }
    
    .file-icon[b-nf2ltuiaoo] {
        height: 32px; /* Smaller icons on mobile */
    }
    
    .thumbnail-image[b-nf2ltuiaoo] {
        max-height: 32px; /* Smaller thumbnails on mobile */
    }
    
    .files-list[b-nf2ltuiaoo] {
        padding: 0 0.8rem 2.5rem 0.8rem; /* Increased bottom padding for small mobile */
    }
    
    .files-toolbar[b-nf2ltuiaoo] {
        padding: 0.5rem 1rem;
    }
    
    .file-name[b-nf2ltuiaoo] {
        font-size: 0.65rem;
        margin: 0; /* Ensure no margins on small screens */
    }
    
    .file-details[b-nf2ltuiaoo] {
        font-size: 0.55rem;
    }
    
    .filter-input[b-nf2ltuiaoo] {
        font-size: 0.7rem;
        min-width: 50px;
        flex: 1;
    }
    
    /* No grid mode overrides - use same layout as list view */
}

/* No grid mode specific styling - both views use same header layout */

/* ========================================
   OVERLAY MEDIA VIEWER STYLES
   ======================================== */

/* Main Overlay Container */
.media-viewer-overlay[b-nf2ltuiaoo] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: auto;
    outline: none;
    animation: fadeIn-b-nf2ltuiaoo 0.3s ease-out;
}

.media-viewer-overlay.fullscreen[b-nf2ltuiaoo] {
    background: rgba(0, 0, 0, 1);
}

/* Hide cursor when controls are hidden */
.media-viewer-overlay.hide-cursor[b-nf2ltuiaoo] {
    cursor: none;
}

/* Ensure interactive elements always show correct cursor even when parent has cursor: none */
.media-viewer-overlay.hide-cursor .viewer-btn[b-nf2ltuiaoo],
.media-viewer-overlay.hide-cursor .viewer-nav[b-nf2ltuiaoo] {
    cursor: pointer !important;
}

.media-viewer-overlay.hide-cursor .viewer-btn:disabled[b-nf2ltuiaoo],
.media-viewer-overlay.hide-cursor .viewer-nav:disabled[b-nf2ltuiaoo] {
    cursor: not-allowed !important;
}

@keyframes fadeIn-b-nf2ltuiaoo {
    from {
        opacity: 0;
        backdrop-filter: blur(0px);
        -webkit-backdrop-filter: blur(0px);
    }
    to {
        opacity: 1;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }
}

/* Viewer Toolbars */
.viewer-toolbar[b-nf2ltuiaoo] {
    position: absolute;
    left: 0;
    right: 0;
    padding: 1rem 2rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    color: white;
    z-index: 10010; /* Higher than everything else to ensure buttons remain clickable */
    transition: all 0.3s ease;
    pointer-events: auto;
}

.viewer-toolbar-top[b-nf2ltuiaoo] {
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent);
    grid-template-columns: 1fr auto 1fr;
    display: grid;
}

.viewer-toolbar.hidden[b-nf2ltuiaoo] {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

.viewer-toolbar.visible[b-nf2ltuiaoo] {
    opacity: 1;
    transform: translateY(0);
}

/* Toolbar Content */
.viewer-toolbar-left[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 1rem;
    justify-self: start;
}

.viewer-toolbar-center[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
}

.viewer-toolbar-right[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-self: end;
}

.viewer-counter[b-nf2ltuiaoo] {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.viewer-filename[b-nf2ltuiaoo] {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.95);
    text-align: center;
    background: rgba(0, 0, 0, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 1.5rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Viewer Buttons */
.viewer-btn[b-nf2ltuiaoo] {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 0.9rem;
}

.viewer-btn:hover[b-nf2ltuiaoo] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

.viewer-btn:active[b-nf2ltuiaoo] {
    transform: scale(0.95);
}

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

.viewer-btn:disabled:hover[b-nf2ltuiaoo] {
    background: rgba(255, 255, 255, 0.1);
    transform: none;
}

/* Navigation Buttons */
.viewer-nav[b-nf2ltuiaoo] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 1.1rem;
    z-index: 10010; /* Higher than drag feedback overlay */
}

.viewer-nav-prev[b-nf2ltuiaoo] {
    left: 2rem;
}

.viewer-nav-next[b-nf2ltuiaoo] {
    right: 2rem;
}

.viewer-nav.hidden[b-nf2ltuiaoo] {
    opacity: 0;
    transform: translateY(-50%) scale(0.8);
    pointer-events: none;
}

.viewer-nav.visible[b-nf2ltuiaoo] {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.viewer-nav:hover[b-nf2ltuiaoo] {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.viewer-nav:active[b-nf2ltuiaoo] {
    transform: translateY(-50%) scale(0.95);
}

.viewer-nav:disabled[b-nf2ltuiaoo] {
    opacity: 0.3;
    cursor: not-allowed;
}

.viewer-nav:disabled:hover[b-nf2ltuiaoo] {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-50%) scale(1);
}

/* Media Viewer Content */
.viewer-content[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10003; /* Higher than drag feedback overlay */
}

.viewer-content img[b-nf2ltuiaoo],
.viewer-content video[b-nf2ltuiaoo] {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: auto;
    transform-origin: center center;
    position: relative;
    z-index: 10004; /* Ensure media is always on top */
}

/* Ensure smooth transforms during drag operations */
.viewer-content.dragging[b-nf2ltuiaoo],
.viewer-content.dragging img[b-nf2ltuiaoo],
.viewer-content.dragging video[b-nf2ltuiaoo] {
    will-change: transform;
}

/* Media Elements */
.viewer-media[b-nf2ltuiaoo] {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /* Ensure media elements always stay fully visible */
    opacity: 1 !important;
    position: relative;
    z-index: 10005 !important;
    filter: none !important;
    -webkit-filter: none !important;
}

.viewer-content.zoomed .viewer-media[b-nf2ltuiaoo] {
    max-width: none;
    max-height: none;
    width: 100%;
    height: auto;
    border-radius: 0;
}

/* Override cursor for videos even in zoomed mode */
.viewer-content.zoomed video.viewer-media[b-nf2ltuiaoo] {
    cursor: auto !important;
}

.viewer-content.zoomed video.media-video[b-nf2ltuiaoo] {
    cursor: auto !important;
}

.viewer-content.zoomed img.viewer-media[b-nf2ltuiaoo] {
    cursor: grab;
}

.viewer-content.zoomed img.viewer-media:active[b-nf2ltuiaoo] {
    cursor: grabbing;
}

/* Video specific styles */
video.viewer-media[b-nf2ltuiaoo] {
    outline: none;
    /* Prevent any opacity inheritance */
    opacity: 1 !important;
    /* Ensure proper color profile */
    color-scheme: normal;
    /* Ensure video is fully opaque */
    background: transparent;
    /* Remove problematic transforms and filters that can cause black screen */
    filter: none !important;
    -webkit-filter: none !important;
    transform: none;
    -webkit-transform: none;
    will-change: auto;
    /* Prevent cursor changes on video that might trigger re-rendering */
    pointer-events: auto;
    /* Ensure video renders properly */
    object-fit: contain;
    /* Prevent video from being affected by parent transforms */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    /* Ensure video always stays on top and fully visible */
    position: relative;
    z-index: 10005 !important;
}

/* New media-video class for enhanced video styling */
.media-video[b-nf2ltuiaoo] {
    object-position: center;
    align-content: center;
    text-align: center;
    height: 100%;
    width: auto;
    max-width: 100%;
}

video.viewer-media[b-nf2ltuiaoo]::-webkit-media-controls {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px;
}

video.viewer-media[b-nf2ltuiaoo]::-webkit-media-controls-panel {
    background: rgba(0, 0, 0, 0.8);
}

/* Additional video brightness and quality optimizations */
video.viewer-media[b-nf2ltuiaoo]::-webkit-media-controls-timeline {
    background: rgba(255, 255, 255, 0.2);
}

video.viewer-media[b-nf2ltuiaoo]::-webkit-media-controls-current-time-display,
video.viewer-media[b-nf2ltuiaoo]::-webkit-media-controls-time-remaining-display {
    color: white;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}


/* Error State */
.viewer-error[b-nf2ltuiaoo] {
    text-align: center;
    color: white;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.viewer-error i[b-nf2ltuiaoo] {
    font-size: 2.5rem;
    color: #ff6b6b;
    margin-bottom: 1rem;
    display: block;
}

.viewer-error p[b-nf2ltuiaoo] {
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.viewer-error .btn[b-nf2ltuiaoo] {
    background: var(--primary-color);
    border: none;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.2s ease;
}

.viewer-error .btn:hover[b-nf2ltuiaoo] {
    background: var(--primary-hover-color);
    transform: translateY(-1px);
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    .viewer-toolbar[b-nf2ltuiaoo] {
        padding: 0.75rem 1rem;
    }
    
    .viewer-counter[b-nf2ltuiaoo] {
        font-size: 0.9rem;
        padding: 0.4rem 0.8rem;
    }
    
    .viewer-filename[b-nf2ltuiaoo] {
        font-size: 1rem;
        padding: 0.6rem 1rem;
        max-width: 80%;
    }
    
    .viewer-btn[b-nf2ltuiaoo] {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 0.8rem;
    }
    
    .viewer-nav[b-nf2ltuiaoo] {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    
    .viewer-nav-prev[b-nf2ltuiaoo] {
        left: 1rem;
    }
    
    .viewer-nav-next[b-nf2ltuiaoo] {
        right: 1rem;
    }
    
    .viewer-toolbar-right[b-nf2ltuiaoo] {
        gap: 0.3rem;
    }
    
    .viewer-error[b-nf2ltuiaoo] {
        padding: 1.5rem;
        margin: 1rem;
    }
    
    .viewer-error i[b-nf2ltuiaoo] {
        font-size: 2rem;
    }
    
    .viewer-error p[b-nf2ltuiaoo] {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .viewer-toolbar[b-nf2ltuiaoo] {
        padding: 0.5rem 0.75rem;
    }
    
    .viewer-counter[b-nf2ltuiaoo] {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
    }
    
    .viewer-filename[b-nf2ltuiaoo] {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
        max-width: 85%;
    }
    
    .viewer-btn[b-nf2ltuiaoo] {
        width: 2rem;
        height: 2rem;
        font-size: 0.75rem;
    }
    
    .viewer-nav[b-nf2ltuiaoo] {
        width: 2.2rem;
        height: 2.2rem;
        font-size: 0.9rem;
    }
    
    .viewer-nav-prev[b-nf2ltuiaoo] {
        left: 0.5rem;
    }
    
    .viewer-nav-next[b-nf2ltuiaoo] {
        right: 0.5rem;
    }
    
    .viewer-toolbar-right[b-nf2ltuiaoo] {
        gap: 0.2rem;
    }
}

/* Drag Feedback Overlay */
.viewer-drag-feedback[b-nf2ltuiaoo] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Less opaque to reduce darkening effect */
    z-index: 10001; /* Lower than media content */
    pointer-events: none;
    transition: none;
    transform-origin: center;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ===========================
   DRAG AND DROP STYLES
   ========================= */

/* Main container drag-over state - removed old overlay, now using new drag-drop-overlay */
.files-container.drag-over[b-nf2ltuiaoo] {
    position: relative;
}

/* Folder drop zone highlighting */
.file-card.drag-over-folder[b-nf2ltuiaoo],
.list-row.drag-over-folder[b-nf2ltuiaoo],
.waterfall-item.drag-over-folder[b-nf2ltuiaoo] {
    background-color: var(--bs-success-bg-subtle) !important;
    border: 2px dashed var(--bs-success) !important;
    border-radius: 8px;
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(25, 135, 84, 0.2);
    transition: all 0.2s ease;
}

/* Invalid drag target highlighting */
.file-card.drag-forbidden[b-nf2ltuiaoo],
.list-row.drag-forbidden[b-nf2ltuiaoo],
.waterfall-item.drag-forbidden[b-nf2ltuiaoo] {
    background-color: var(--bs-danger-bg-subtle) !important;
    border: 2px dashed var(--bs-danger) !important;
    border-radius: 8px;
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.2);
    transition: all 0.2s ease;
    cursor: not-allowed;
}

/* Folder icon highlighting during drag */
.drag-over-folder .file-icon i[b-nf2ltuiaoo],
.drag-over-folder .file-icon-small i[b-nf2ltuiaoo] {
    color: var(--bs-success) !important;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Folder icon highlighting for invalid drag targets */
.drag-forbidden .file-icon i[b-nf2ltuiaoo],
.drag-forbidden .file-icon-small i[b-nf2ltuiaoo] {
    color: var(--bs-danger) !important;
    transform: scale(1.1);
    transition: all 0.2s ease;
}

/* Upload Progress Panel */
.upload-progress-panel[b-nf2ltuiaoo] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-height: 300px;
    overflow-y: auto;
}

.upload-header[b-nf2ltuiaoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    border-radius: 8px 8px 0 0;
}

.upload-header h6[b-nf2ltuiaoo] {
    margin: 0;
    font-weight: 600;
    color: var(--text-primary);
}

.upload-list[b-nf2ltuiaoo] {
    padding: 0.5rem;
}

.upload-item[b-nf2ltuiaoo] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.upload-info[b-nf2ltuiaoo] {
    flex-grow: 1;
    min-width: 0;
}

.upload-filename[b-nf2ltuiaoo] {
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-path[b-nf2ltuiaoo] {
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.upload-status[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.upload-progress-container[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upload-percentage[b-nf2ltuiaoo] {
    font-size: 0.85rem;
    font-weight: 500;
    min-width: 40px;
    text-align: right;
    color: var(--text-primary);
}

/* Progress bar styling */
.upload-progress-container .progress[b-nf2ltuiaoo] {
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
}

.upload-progress-container .progress-bar[b-nf2ltuiaoo] {
    background: linear-gradient(45deg, var(--bs-primary), var(--bs-info));
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Drag-over visual feedback improvements */
.files-container.drag-over .files-content[b-nf2ltuiaoo] {
    opacity: 0.7;
    /* Allow folder elements to still receive drag events */
}

/* Re-enable pointer events for folder elements during container drag-over */
.files-container.drag-over .file-card[data-folder-path][b-nf2ltuiaoo],
.files-container.drag-over .list-row[data-folder-path][b-nf2ltuiaoo],
.files-container.drag-over .waterfall-item[data-folder-path][b-nf2ltuiaoo] {
    pointer-events: auto;
}

/* Dark mode adjustments - use data-theme attribute only */
:root[data-theme="dark"] .upload-progress-panel[b-nf2ltuiaoo] {
    background: var(--bs-dark);
    border-color: var(--bs-secondary);
}

:root[data-theme="dark"] .upload-header[b-nf2ltuiaoo] {
    background: var(--bs-darker);
    border-color: var(--bs-secondary);
}

:root[data-theme="dark"] .upload-item[b-nf2ltuiaoo] {
    background: var(--bs-darker);
    border-color: var(--bs-secondary);
}

/* Responsive adjustments for upload panel */
@media (max-width: 768px) {
    .upload-progress-panel[b-nf2ltuiaoo] {
        margin: 0.5rem;
        max-height: 200px;
    }
    
    .upload-item[b-nf2ltuiaoo] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .upload-status[b-nf2ltuiaoo] {
        width: 100%;
        justify-content: space-between;
    }
    
    .upload-progress-container[b-nf2ltuiaoo] {
        flex-grow: 1;
    }
}

/* ===========================
   FILE UPLOAD OVERLAY STYLES
   ========================= */

/* Main content overlay for drag-and-drop to current folder */
.files-content-overlay[b-nf2ltuiaoo] {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    pointer-events: none !important; /* Changed to none - only enable during drag */
    z-index: 1000 !important;
    cursor: default !important;
    /* Reset any default input styling */
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    /* Make sure it's not affected by flexbox */
    flex: none !important;
}

/* Folder upload overlay for drag-and-drop to specific folders */
.folder-upload-overlay[b-nf2ltuiaoo] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: auto;
    z-index: 1001;
    cursor: default;
}

/* Dropdown file input styling */
.dropdown-item-file-input[b-nf2ltuiaoo] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
    pointer-events: none;
}

/* Make sure labels work properly */
.dropdown-item label[b-nf2ltuiaoo] {
    cursor: pointer;
    display: block;
    width: 100%;
    padding: 0.25rem 1rem;
    margin: 0;
    text-decoration: none;
    color: var(--bs-dropdown-link-color);
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

.dropdown-item label:hover[b-nf2ltuiaoo],
.dropdown-item label:focus[b-nf2ltuiaoo] {
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

/* Drag-and-drop overlay */
.drag-drop-overlay[b-nf2ltuiaoo] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    border: 2px dashed var(--primary-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100; /* Above InputFile overlay (50) but below file items (200) */
    backdrop-filter: blur(2px);
    animation: dragOverPulse-b-nf2ltuiaoo 1.5s ease-in-out infinite;
    pointer-events: none; /* Allow events to pass through to InputFile */
}

.drag-drop-message[b-nf2ltuiaoo] {
    text-align: center;
    color: var(--primary-color);
    font-weight: 500;
    pointer-events: none;
    user-select: none;
}

.drag-drop-message i[b-nf2ltuiaoo] {
    opacity: 0.8;
    margin-bottom: 1rem;
}

.drag-drop-message h4[b-nf2ltuiaoo] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 600;
}

.drag-drop-message p[b-nf2ltuiaoo] {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.8;
}

@keyframes dragOverPulse-b-nf2ltuiaoo {
    0%, 100% {
        background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
        border-color: var(--primary-color);
    }
    50% {
        background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.15);
        border-color: rgba(var(--primary-color-rgb, 13, 110, 253), 0.8);
    }
}

/* Files content drag-over state */
.files-content.drag-over[b-nf2ltuiaoo] {
    position: relative;
}

/* InputFile overlay - only interactive during drag operations */
.files-content-overlay[b-nf2ltuiaoo] {
    pointer-events: none !important; /* Default: disabled to allow touch events through */
}

.files-content.drag-over .files-content-overlay[b-nf2ltuiaoo],
.files-content-overlay.drag-active[b-nf2ltuiaoo] {
    pointer-events: auto !important; /* Enable only during drag operations */
}

/* =========================================
   Mobile Touch Interaction Styles
   ========================================= */

/* Mobile selection mode styles */
.mobile-selection-indicator[b-nf2ltuiaoo] {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    pointer-events: none;
}

.mobile-selection-checkbox[b-nf2ltuiaoo] {
    position: absolute;
    top: -2px;
    right: -2px;
    color: var(--primary-color， #007bff);
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.mobile-selection-checkbox.checked[b-nf2ltuiaoo] {
    background: var(--primary-color, #007bff);
    border-color: var(--primary-color, #007bff);
}

/* Dark theme specific styles for mobile selection checkbox */
[data-theme="dark"] .mobile-selection-checkbox[b-nf2ltuiaoo] {
    background: rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

.mobile-selection-checkbox i[b-nf2ltuiaoo] {
    color: white;
    font-size: 1rem;
    opacity: 0;
}

.mobile-selection-checkbox.checked i[b-nf2ltuiaoo] {
    opacity: 1;
}

/* Mobile select mode visual feedback */
.mobile-select-mode[b-nf2ltuiaoo] {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.mobile-select-mode .file-card[b-nf2ltuiaoo],
.mobile-select-mode .waterfall-item[b-nf2ltuiaoo] {
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.mobile-select-mode .file-card.selected[b-nf2ltuiaoo],
.mobile-select-mode .waterfall-item.selected[b-nf2ltuiaoo] {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Prevent text selection during touch interactions */
.file-card[b-nf2ltuiaoo],
.waterfall-item[b-nf2ltuiaoo] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Touch feedback for mobile */
@media (max-width: 768px) {
    .file-card:active[b-nf2ltuiaoo],
    .waterfall-item:active[b-nf2ltuiaoo] {
        transform: scale(0.95);
        transition: transform 0.1s ease;
    }
}

/* Dark theme file icon improvements */
[data-theme="dark"] .file-icon i.text-primary[b-nf2ltuiaoo],
[data-theme="dark"] .file-icon-small i.text-primary[b-nf2ltuiaoo],
[data-theme="dark"] .thumbnail-fallback.text-primary[b-nf2ltuiaoo] {
    color: #87ceeb !important; /* Light sky blue for better visibility */
}

[data-theme="dark"] .waterfall-img-fallback i.text-primary[b-nf2ltuiaoo],
[data-theme="dark"] .file-folder-icon i.text-primary[b-nf2ltuiaoo] {
    color: #87ceeb !important; /* Light sky blue for better visibility */
}

/* =========================================
   Mobile Improvements
   ========================================= */

/* Mobile Select All Checkbox */
.mobile-select-all-container[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    margin-right: 0;
    padding-left: 0.1rem;
    height: 40px; /* Match button height for consistent vertical alignment */
    justify-content: center; /* Center the checkbox within container */
}

.mobile-select-all-checkbox[b-nf2ltuiaoo] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    border: 2px solid var(--border-color);
    border-radius: 4px;
    transition: all 0.2s ease;
    margin: 0; /* Remove any default margins */
    flex-shrink: 0; /* Prevent shrinking */
}

.mobile-select-all-checkbox:checked[b-nf2ltuiaoo] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.mobile-select-all-checkbox:focus[b-nf2ltuiaoo] {
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
    outline: none;
}

/* Mobile Sort Dropdown */
.mobile-sort-dropdown[b-nf2ltuiaoo] {
    margin-right: 0.5rem;
}

.mobile-controls-group[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-right: 0.5rem;
}

/* Ensure mobile controls are always visible on mobile */
@media (max-width: 768px) {
    .mobile-controls-group[b-nf2ltuiaoo] {
        display: flex !important;
        visibility: visible !important;
    }
    
    /* Ensure mobile select all checkbox container matches button heights */
    .mobile-select-all-container[b-nf2ltuiaoo] {
        height: 40px; /* Consistent with mobile button heights */
        min-width: 40px; /* Consistent touch target size */
    }
}

.mobile-search-btn[b-nf2ltuiaoo] {
    padding: 0.5rem;
    font-size: 0.9rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-sort-dropdown .btn[b-nf2ltuiaoo] {
    font-size: 0.85rem;
    padding: 0.5rem 0.75rem;
}

.mobile-sort-dropdown .dropdown-menu .dropdown-item[b-nf2ltuiaoo] {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
}

.mobile-sort-dropdown .dropdown-menu .dropdown-item.active[b-nf2ltuiaoo] {
    background-color: var(--primary-color);
    color: white;
}

.mobile-sort-dropdown .dropdown-menu .dropdown-item i[b-nf2ltuiaoo] {
    width: 16px;
}

.mobile-sort-dropdown .dropdown-menu .dropdown-item .ms-auto[b-nf2ltuiaoo] {
    margin-left: auto !important;
}

/* Mobile Search Overlay */
.mobile-search-overlay[b-nf2ltuiaoo] {
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.mobile-search-container[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: 100%;
}

.mobile-search-input-wrapper[b-nf2ltuiaoo] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.mobile-search-icon[b-nf2ltuiaoo] {
    position: absolute;
    left: 12px;
    color: var(--text-muted);
    font-size: 0.9rem;
    z-index: 2;
    pointer-events: none;
}

.mobile-search-input[b-nf2ltuiaoo] {
    width: 100%;
    height: 44px;
    padding: 0 44px 0 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mobile-search-input:focus[b-nf2ltuiaoo] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.mobile-search-input[b-nf2ltuiaoo]::placeholder {
    color: var(--text-muted);
}

.mobile-search-clear[b-nf2ltuiaoo] {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: none;
    color: var(--text-muted);
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-search-clear:hover[b-nf2ltuiaoo] {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.mobile-search-close[b-nf2ltuiaoo] {
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.mobile-search-close:hover[b-nf2ltuiaoo] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

/* Mobile List Layout */
.files-list.mobile-list[b-nf2ltuiaoo] {
    display: flex;
    flex-direction: column;
    gap: 0; /* Reduced gap from 1px to 0 */
    padding: 0;
}

.mobile-list-card[b-nf2ltuiaoo] {
    background: var(--bg-primary);
    border: none; /* Remove border */
    border-radius: 0; /* Remove border radius for cleaner look */
    margin: 0; /* Remove all margins to eliminate gaps */
    transition: all 0.2s ease;
    cursor: pointer;
    min-height: 50px; /* Reduced from 60px to 50px */
    position: relative;
    display: flex;
    align-items: flex-start;
    touch-action: manipulation; /* Enable fast taps, prevent double-tap zoom */
    -webkit-touch-callout: none; /* Disable callout on iOS */
    -webkit-user-select: none; /* Disable text selection on touch */
    user-select: none;
    border-bottom: 1px solid var(--border-color); /* Add subtle separator line */
}

.mobile-list-card:hover[b-nf2ltuiaoo] {
    background: var(--bg-hover);
    transform: none; /* Remove transform to keep flat appearance */
    box-shadow: none; /* Remove shadow for cleaner look */
}

.mobile-list-card.selected[b-nf2ltuiaoo] {
    background: rgba(var(--primary-color-rgb), 0.08);
    border-bottom-color: var(--primary-color); /* Update border color for bottom border only */
    box-shadow: none; /* Remove shadow for cleaner look */
}

.mobile-list-card.focused[b-nf2ltuiaoo] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Mobile selection indicator - positioned at upper right corner, always visible in selection mode */
.mobile-selection-indicator[b-nf2ltuiaoo] {
    position: absolute;
    top: 8px;
    right: 8px; /* Moved from left to right */
    z-index: 10;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
}

.mobile-list-card.mobile-select-mode .mobile-selection-indicator[b-nf2ltuiaoo] {
    opacity: 1;
    transform: scale(1);
}

.mobile-checkbox[b-nf2ltuiaoo] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.mobile-card-content[b-nf2ltuiaoo] {
    display: flex;
    align-items: flex-start;
    padding: 0.5rem 0.75rem; /* Reduced top/bottom padding from 0.75rem to 0.5rem */
    gap: 0.75rem;
    width: 100%;
    cursor: pointer;
    /* No need for left padding adjustment since checkbox is now on the right */
}

.mobile-list-card.mobile-select-mode .mobile-card-content[b-nf2ltuiaoo] {
    padding-right: 2.5rem; /* Add right padding to make room for checkbox on the right */
}

.mobile-file-icon[b-nf2ltuiaoo] {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

.mobile-file-info[b-nf2ltuiaoo] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-file-name[b-nf2ltuiaoo] {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
    line-height: 1.3;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.mobile-file-name:hover[b-nf2ltuiaoo] {
    background-color: rgba(var(--primary-color-rgb), 0.1);
}

/* Compact details line - all in one row */
.mobile-file-details[b-nf2ltuiaoo] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.2;
    flex-wrap: nowrap; /* Prevent wrapping to keep all items in one row */
    overflow: hidden; /* Hide overflow if needed */
}

.mobile-file-size[b-nf2ltuiaoo],
.mobile-file-type[b-nf2ltuiaoo],
.mobile-file-date[b-nf2ltuiaoo] {
    white-space: nowrap;
    flex-shrink: 1; /* Allow shrinking if needed */
}

.mobile-file-size[b-nf2ltuiaoo] {
    font-weight: 500;
}

/* Detail separator */
.mobile-detail-separator[b-nf2ltuiaoo] {
    color: var(--text-quaternary);
    font-weight: bold;
    font-size: 0.7rem;
    opacity: 0.6;
    flex-shrink: 0; /* Don't shrink separators */
}

.mobile-file-size[b-nf2ltuiaoo] {
    font-weight: 500;
}

.mobile-file-type[b-nf2ltuiaoo] {
    font-style: italic;
}

.mobile-file-date[b-nf2ltuiaoo] {
    color: var(--text-muted);
}

/* Mobile drag and drop styles */
.mobile-list-card.drag-over-folder[b-nf2ltuiaoo] {
    background: rgba(var(--success-color-rgb, 25, 135, 84), 0.1);
    border-color: var(--success-color, #198754);
    border-style: dashed;
    border-width: 2px;
}

.mobile-list-card.drag-forbidden[b-nf2ltuiaoo] {
    background: rgba(var(--danger-color-rgb, 220, 53, 69), 0.1);
    border-color: var(--danger-color, #dc3545);
    cursor: not-allowed;
}

/* Hide list header on mobile */
@media (max-width: 768px) {
    .list-header[b-nf2ltuiaoo] {
        display: none;
    }
    
    /* Adjust mobile card margins for better spacing */
    .mobile-list-card[b-nf2ltuiaoo] {
        margin: 0 1rem 0.5rem 1rem;
        min-height: 50px; /* Keep original height */
    }
    
    /* Better touch targets */
    .mobile-file-name[b-nf2ltuiaoo] {
        min-height: 24px;
        padding: 4px 6px;
        font-size: 1rem;
    }
    
    .mobile-selection-indicator .mobile-checkbox[b-nf2ltuiaoo] {
        width: 18px;
        height: 18px;
    }
    
    /* Compact file details layout - keep in one row */
    .mobile-file-details[b-nf2ltuiaoo] {
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 0.375rem;
        margin-top: 0.125rem;
        overflow: hidden;
    }
    
    /* Make mobile controls more compact */
    .mobile-controls-group[b-nf2ltuiaoo] {
        gap: 0.375rem;
        margin-right: 0.375rem;
    }
    
    /* Better header responsive behavior */
    .header-row[b-nf2ltuiaoo] {
        padding: 0.5rem 0.75rem;
    }
    
    .header-controls[b-nf2ltuiaoo] {
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 576px) {
    /* Even more compact on very small screens */
    .mobile-list-card[b-nf2ltuiaoo] {
        margin: 0 0.5rem 0.5rem 0.5rem;
    }
    
    /* Keep details in one row even on small screens, but allow smaller text */
    .mobile-file-details[b-nf2ltuiaoo] {
        font-size: 0.8rem;
        gap: 0.25rem;
    }
    
    /* Only stack if screen is extremely narrow (< 350px) */
    @media (max-width: 350px) {
        .mobile-file-details[b-nf2ltuiaoo] {
            flex-direction: column;
            gap: 0.125rem;
            align-items: flex-start;
        }
        
        .mobile-detail-separator[b-nf2ltuiaoo] {
            display: none;
        }
    }
    
    /* Make sort button text shorter on very small screens */
    .mobile-sort-dropdown .btn-text[b-nf2ltuiaoo] {
        display: none;
    }
    
    .mobile-sort-dropdown .btn[b-nf2ltuiaoo]::after {
        margin-left: 0;
    }
}

/* Hover-based dropdown functionality */
.dropdown-hover[b-nf2ltuiaoo] {
    position: relative;
}

.dropdown-hover .dropdown-menu[b-nf2ltuiaoo] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    margin: 0;
    padding: 0.5rem 0;
    min-width: 10rem;
    transition: none;
    /* Don't force display:none - let Bootstrap handle visibility */
}

/* Show dropdown on hover for devices that support hover, but only if not already shown by Bootstrap */
@media (hover: hover) {
    .dropdown-hover:hover .dropdown-menu:not(.show)[b-nf2ltuiaoo] {
        display: block !important;
    }
}

/* Submenu hover support */
.dropdown-submenu.dropdown-hover[b-nf2ltuiaoo] {
    position: relative;
}

.dropdown-submenu.dropdown-hover .dropdown-menu[b-nf2ltuiaoo] {
    top: 0;
    left: 100%;
    margin-top: -1px;
    margin-left: -1px;
}

@media (hover: hover) {
    .dropdown-submenu.dropdown-hover:hover > .dropdown-menu[b-nf2ltuiaoo] {
        display: block;
    }
}

/* Ensure dropdown arrow is visible */
.dropdown-hover .dropdown-toggle[b-nf2ltuiaoo]::after {
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    margin-left: auto;
    vertical-align: 0.255em;
}

/* Mobile sort dropdown - keep Bootstrap behavior */
.mobile-sort-dropdown .dropdown-menu[b-nf2ltuiaoo] {
    right: 0;
    left: auto;
}

/* Ensure proper z-index for nested dropdowns */
.dropdown-submenu .dropdown-menu[b-nf2ltuiaoo] {
    z-index: 1001;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .dropdown-hover .dropdown-menu[b-nf2ltuiaoo] {
        background-color: var(--bs-dark);
        border-color: var(--bs-secondary);
        box-shadow: 0 0.5rem 1rem rgba(255, 255, 255, 0.1);
    }
}

/* =========================================
   Cloud Provider Icon Styles
   ========================================= */

/* Base cloud provider icon styling */
.cloud-provider-icon[b-nf2ltuiaoo] {
    display: block;
    margin: 0 auto;
    object-fit: contain;
    border-radius: 4px;
    /* Ensure smooth rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

/* =========================================
   Waterfall Cloud Provider Folder Styles
   ========================================= */

/* =========================================
   Cloud Provider Folder Icon Sizing
   ========================================= */

/* Waterfall folder container - dynamic height for regular folders, fixed for cloud providers */
.waterfall-folder[b-nf2ltuiaoo] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    /* Dynamic height by default for regular folders */
    min-height: 120px;
}

/* Cloud provider folders get fixed height for consistent layout */
.waterfall-folder:has(.cloud-provider-icon)[b-nf2ltuiaoo] {
    height: 140px;
    max-height: 140px;
    min-height: 140px;
}

/* Fallback for browsers that don't support :has() selector */
.waterfall-folder.cloud-provider-folder[b-nf2ltuiaoo] {
    height: 140px;
    max-height: 140px;
    min-height: 140px;
}

/* Folder name styling in waterfall view */
.waterfall-folder .folder-name[b-nf2ltuiaoo] {
    font-size: 0.85rem;
    font-weight: 500;
    text-align: center;
    margin-top: 8px;
    line-height: 1.2;
    word-break: break-word;
    /* Allow dynamic text expansion for regular folders */
}

/* Cloud provider folder names get line clamping */
.waterfall-folder:has(.cloud-provider-icon) .folder-name[b-nf2ltuiaoo],
.waterfall-folder.cloud-provider-folder .folder-name[b-nf2ltuiaoo] {
    max-height: 3.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Folder info styling in waterfall view */
.waterfall-folder .folder-info[b-nf2ltuiaoo] {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 4px;
    opacity: 0.8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

/* Grid view cloud icons (fa-2x equivalent) - size constrained to match fa-2x */
.cloud-provider-icon.fa-2x[b-nf2ltuiaoo] {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
}

/* List view cloud icons (small size) - size constrained to match small FontAwesome icons */
.cloud-provider-icon.small-icon[b-nf2ltuiaoo] {
    width: 20px;
    height: 20px;
    object-fit: contain;
    display: block;
}

/* Mobile view cloud icons - size constrained to match mobile FontAwesome icons */
.cloud-provider-icon.mobile-icon[b-nf2ltuiaoo] {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: block;
}

/* Waterfall view cloud icons (fa-3x equivalent) - aspect ratio preserved */
.cloud-provider-icon.fa-3x[b-nf2ltuiaoo] {
    max-width: 48px !important;
    max-height: 48px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    font-size: 48px !important;
}

/* Waterfall folder icon container constraints - CRITICAL for size matching */
.waterfall-folder .folder-icon[b-nf2ltuiaoo] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    margin: 0 auto 8px auto !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Ensure waterfall folder FontAwesome icons are properly sized */
.waterfall-folder .folder-icon i.fa-3x[b-nf2ltuiaoo] {
    font-size: 48px !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure waterfall cloud provider images are properly sized with fixed dimensions */
.waterfall-folder .folder-icon .cloud-provider-icon.fa-3x[b-nf2ltuiaoo] {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
}

/* Additional override for any potential CSS conflicts - fixed dimensions */
.waterfall-item .waterfall-folder .folder-icon img[b-nf2ltuiaoo] {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain !important;
}

/* Ultra-specific waterfall cloud provider image constraints - fixed dimensions */
.waterfall-item .waterfall-folder .folder-icon img.cloud-provider-icon.fa-3x[b-nf2ltuiaoo] {
    /* Use fixed dimensions for consistent sizing */
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    font-size: 48px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    display: block !important;
}

/* Ensure the container doesn't allow overflow */
.waterfall-item .waterfall-folder .folder-icon[b-nf2ltuiaoo] {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 8px auto !important;
    font-size: 16px !important; /* Reset font-size context */
}

/* Mobile list view cloud icons - aspect ratio preserved */
.cloud-provider-icon.mobile-icon[b-nf2ltuiaoo] {
    max-width: 32px;
    max-height: 32px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Desktop list view cloud icons - aspect ratio preserved */
.cloud-provider-icon.small-icon[b-nf2ltuiaoo] {
    max-width: 24px;
    max-height: 24px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* WebDAV icon fix for dark theme */
[data-theme="dark"] .cloud-provider-icon[src*="WebDAV"][b-nf2ltuiaoo] {
    filter: invert(1) brightness(0.9);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px;
}

/* WebDAV icon fix for light theme (ensure normal appearance) */
[data-theme="light"] .cloud-provider-icon[src*="WebDAV"][b-nf2ltuiaoo] {
    filter: none;
    background-color: transparent;
    padding: 0;
}

/* Image loading fallback and error handling */
.cloud-provider-icon[src=""][b-nf2ltuiaoo],
.cloud-provider-icon:not([src])[b-nf2ltuiaoo] {
    display: none;
}

/* Ensure proper alignment within file icon containers */
.file-icon .cloud-provider-icon[b-nf2ltuiaoo],
.file-icon-small .cloud-provider-icon[b-nf2ltuiaoo],
.mobile-file-icon .cloud-provider-icon[b-nf2ltuiaoo],
.tree-node-icon .cloud-provider-icon[b-nf2ltuiaoo] {
    margin: 0 auto;
}
/* /Pages/Index.razor.rz.scp.css */
/* Side-by-side layout for multiple valid plans */
.plan-info.side-by-side[b-505r52q2jb] {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
}

.plan-info.side-by-side .primary-plan[b-505r52q2jb],
.plan-info.side-by-side .secondary-plan[b-505r52q2jb] {
    flex: 1;
    min-width: 0;
}

.plan-info.side-by-side .plan-name[b-505r52q2jb] {
    display: block;
    margin-bottom: 4px;
}

/* Mobile responsive styles */
@media (max-width: 768px) {
    /* Add padding to function cards container on mobile */
    .function-cards[b-505r52q2jb] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Add padding to dashboard header on mobile for consistency */
    .dashboard-header[b-505r52q2jb] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .plan-info.side-by-side[b-505r52q2jb] {
        flex-direction: column;
        gap: 8px;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* Login Page Styles */
.login-container[b-3ct2tb7s4c] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    padding: 20px;
}

.login-card[b-3ct2tb7s4c] {
    background: var(--card-background);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
}

.login-header[b-3ct2tb7s4c] {
    text-align: center;
    margin-bottom: 30px;
}

.login-logo[b-3ct2tb7s4c] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.login-logo i[b-3ct2tb7s4c] {
    font-size: 3rem;
    color: var(--primary-color);
    margin-right: 15px;
}

.login-logo h1[b-3ct2tb7s4c] {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.login-subtitle[b-3ct2tb7s4c] {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
    line-height: 1.5;
}

.login-form[b-3ct2tb7s4c] {
    width: 100%;
}

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

.form-label[b-3ct2tb7s4c] {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 8px;
    font-size: 0.95rem;
}

.input-group[b-3ct2tb7s4c] {
    position: relative;
}

.input-group-text[b-3ct2tb7s4c] {
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-right: none;
    border-radius: 8px 0 0 8px;
    color: var(--text-secondary);
    padding: 12px 15px;
    display: flex;
    align-items: center;
}

.input-group .form-control[b-3ct2tb7s4c] {
    border-left: none;
    border-radius: 0 8px 8px 0;
    padding: 12px 15px;
    background: var(--input-background);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.input-group .form-control:focus[b-3ct2tb7s4c] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-color-rgb), 0.25);
    background: var(--card-background);
}

.input-group .form-control[b-3ct2tb7s4c]::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.input-group .btn-outline-secondary[b-3ct2tb7s4c] {
    border-left: none;
    border-radius: 0 8px 8px 0;
    border-color: var(--border-color);
    color: var(--text-secondary);
    background: var(--input-background);
    padding: 12px 15px;
    transition: all 0.3s ease;
}

.input-group .btn-outline-secondary:hover[b-3ct2tb7s4c] {
    background: var(--hover-background);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.form-check[b-3ct2tb7s4c] {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.form-check-input[b-3ct2tb7s4c] {
    margin-right: 10px;
    accent-color: var(--primary-color);
}

.form-check-label[b-3ct2tb7s4c] {
    color: var(--text-secondary);
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
}

.btn-login[b-3ct2tb7s4c] {
    background: var(--primary-color);
    border: none;
    border-radius: 8px;
    color: white;
    font-weight: 600;
    font-size: 1rem;
    padding: 14px 20px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.btn-login:hover:not(:disabled)[b-3ct2tb7s4c] {
    background: var(--primary-hover, var(--primary-color));
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    color: white;
}

.btn-login:focus:not(:disabled)[b-3ct2tb7s4c] {
    background: var(--primary-hover, var(--primary-color));
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb, 13, 110, 253), 0.4);
    color: white;
}

.btn-login:disabled[b-3ct2tb7s4c] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
    background: var(--gray-500);
    color: white;
}

.login-actions[b-3ct2tb7s4c] {
    margin-top: 20px;
    text-align: center;
}

.login-actions .btn[b-3ct2tb7s4c] {
    margin-bottom: 10px;
}

.login-actions .btn-outline-primary[b-3ct2tb7s4c] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: transparent;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.login-actions .btn-outline-primary:hover[b-3ct2tb7s4c] {
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px);
}

.login-actions .btn-link[b-3ct2tb7s4c] {
    color: var(--primary-color);
    font-weight: 500;
    text-decoration: none !important;
    padding: 8px 15px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.login-actions .btn-link:hover[b-3ct2tb7s4c] {
    background: var(--hover-bg);
    color: var(--primary-color);
}

/* Theme-specific button improvements */
:root[data-theme="light"] .btn-login[b-3ct2tb7s4c],
:root:not([data-theme]) .btn-login[b-3ct2tb7s4c] {
    background: #0d6efd;
    border: 1px solid #0d6efd;
    color: white;
}

:root[data-theme="light"] .btn-login:hover:not(:disabled)[b-3ct2tb7s4c],
:root:not([data-theme]) .btn-login:hover:not(:disabled)[b-3ct2tb7s4c] {
    background: #0b5ed7;
    border-color: #0b5ed7;
    color: white;
}

:root[data-theme="light"] .btn-login:focus:not(:disabled)[b-3ct2tb7s4c],
:root:not([data-theme]) .btn-login:focus:not(:disabled)[b-3ct2tb7s4c] {
    background: #0b5ed7;
    border-color: #0b5ed7;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.4);
    color: white;
}

[data-theme="dark"] .btn-login[b-3ct2tb7s4c] {
    background: #4dabf7;
    border: 1px solid #4dabf7;
    color: #212529;
    font-weight: 700;
}

[data-theme="dark"] .btn-login:hover:not(:disabled)[b-3ct2tb7s4c] {
    background: #339af0;
    border-color: #339af0;
    color: #212529;
}

[data-theme="dark"] .btn-login:focus:not(:disabled)[b-3ct2tb7s4c] {
    background: #339af0;
    border-color: #339af0;
    box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.4);
    color: #212529;
}

/* Ensure disabled state works in both themes */
:root[data-theme="light"] .btn-login:disabled[b-3ct2tb7s4c],
:root:not([data-theme]) .btn-login:disabled[b-3ct2tb7s4c] {
    background: #6c757d;
    border-color: #6c757d;
    color: white;
}

[data-theme="dark"] .btn-login:disabled[b-3ct2tb7s4c] {
    background: #495057;
    border-color: #495057;
    color: #adb5bd;
}

/* Loading spinner color fixes */
:root[data-theme="light"] .btn-login .spinner-border[b-3ct2tb7s4c],
:root:not([data-theme]) .btn-login .spinner-border[b-3ct2tb7s4c] {
    color: white;
}

[data-theme="dark"] .btn-login .spinner-border[b-3ct2tb7s4c] {
    color: #212529;
}

/* Alert Styles */
.alert[b-3ct2tb7s4c] {
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    border: none;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

.alert i[b-3ct2tb7s4c] {
    margin-right: 10px;
    font-size: 1.1rem;
}

.alert-danger[b-3ct2tb7s4c] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border-left: 4px solid #dc3545;
}

.alert-success[b-3ct2tb7s4c] {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
    border-left: 4px solid #198754;
}

.alert-warning[b-3ct2tb7s4c] {
    background: rgba(255, 193, 7, 0.1);
    color: #ff8c00;
    border-left: 4px solid #ffc107;
}

.alert-info[b-3ct2tb7s4c] {
    background: rgba(13, 202, 240, 0.1);
    color: #0dcaf0;
    border-left: 4px solid #0dcaf0;
}

/* Reset Form Specific Styles */
.btn-warning[b-3ct2tb7s4c] {
    background: linear-gradient(135deg, #ff8c00, #ffc107);
    border: none;
    color: white;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-warning:hover:not(:disabled)[b-3ct2tb7s4c] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 140, 0, 0.3);
}

.btn-danger[b-3ct2tb7s4c] {
    background: linear-gradient(135deg, #dc3545, #e74c3c);
    border: none;
    color: white;
    font-weight: 600;
    padding: 14px 20px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-danger:hover:not(:disabled)[b-3ct2tb7s4c] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.3);
}

/* Loading Spinner */
.spinner-border-sm[b-3ct2tb7s4c] {
    width: 1rem;
    height: 1rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .login-card[b-3ct2tb7s4c] {
        padding: 30px 20px;
        margin: 10px;
        max-width: 100%;
    }

    .login-logo h1[b-3ct2tb7s4c] {
        font-size: 1.5rem;
    }

    .login-logo i[b-3ct2tb7s4c] {
        font-size: 2.5rem;
        margin-right: 10px;
    }

    .btn-login[b-3ct2tb7s4c],
    .btn-warning[b-3ct2tb7s4c],
    .btn-danger[b-3ct2tb7s4c] {
        padding: 12px 16px;
        font-size: 0.95rem;
    }
}

/* Focus indicators for accessibility */
.form-control:focus[b-3ct2tb7s4c],
.btn:focus[b-3ct2tb7s4c],
.form-check-input:focus[b-3ct2tb7s4c] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Dark mode adjustments - use data-theme attribute only */
:root[data-theme="dark"] .login-container[b-3ct2tb7s4c] {
    background: linear-gradient(135deg, var(--dark-primary) 0%, var(--dark-secondary) 100%);
}

/* Animation for form transitions */
.login-form[b-3ct2tb7s4c] {
    animation: fadeInUp-b-3ct2tb7s4c 0.5s ease-out;
}

@keyframes fadeInUp-b-3ct2tb7s4c {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Pages/Logs.razor.rz.scp.css */
/* Logs Page Styles - Exact copy of Tasks.razor structure */
.logs-page[b-zzyj4y7nhd] {
    padding: 0.25rem;
    max-width: 100%;
    margin: 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100vh - 80px); /* Use fixed value instead of CSS variable to be safe */
    max-height: calc(100vh - 80px);
    overflow: hidden; /* Prevent page-level scrolling */
}

/* Mobile-specific full width and fixed height layout */
@media (max-width: 768px) {
    .logs-page[b-zzyj4y7nhd] {
        padding: 0;
        margin: 0;
        /* Ensure fixed height and width to prevent scrolling */
        height: calc(100vh - 80px);
        max-height: calc(100vh - 80px);
        width: 100vw;
        max-width: 100vw;
        overflow: hidden; /* Prevent both vertical and horizontal page scrolling */
        overflow-x: hidden; /* Explicitly prevent horizontal scrolling */
        box-sizing: border-box; /* Include padding and border in width calculation */
    }
}

/* Desktop Header - Performance.razor style */
.page-header[b-zzyj4y7nhd] {
    margin-bottom: 0.5rem; /* Reduced from 1.5rem to prevent overflow */
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem; /* Added bottom padding */
    border-bottom: 2px solid var(--border-color); /* Added bottom border like Performance page */
}

.page-header-left[b-zzyj4y7nhd] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem; /* Added gap between title and description */
}

.page-header-right[b-zzyj4y7nhd] {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduced gap slightly for better spacing */
}

/* Desktop Title styling - matches Tasks page header-content */
.desktop-title[b-zzyj4y7nhd] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.page-header h1[b-zzyj4y7nhd] {
    font-size: 1.8rem; /* Increased from 1.25rem to match Tasks page */
    font-weight: 600; /* Reduced from 700 to match Tasks page */
    color: var(--text-primary); /* Changed to text-primary instead of primary-color */
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.page-header h1 i[b-zzyj4y7nhd] {
    color: var(--primary-color);
    font-size: 1.5rem;
}

.page-description[b-zzyj4y7nhd] {
    font-size: 0.875rem; /* Increased from 0.8rem */
    color: var(--text-secondary); /* Changed from text-muted to text-secondary */
    margin: 0;
    line-height: 1.5;
}

.page-content[b-zzyj4y7nhd] {
    flex: 1;
    padding: 1.5rem 2rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 0;
    height: 80vh; /* Set fixed height to prevent scrolling */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .logs-page[b-zzyj4y7nhd] {
        padding: 1rem;
    }
    
    .page-title[b-zzyj4y7nhd] {
        font-size: 1.5rem;
    }
    
    .page-title i[b-zzyj4y7nhd] {
        font-size: 1.25rem;
    }
    
    .page-description[b-zzyj4y7nhd] {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .logs-page[b-zzyj4y7nhd] {
        padding: 0.75rem;
    }
    
    .page-title[b-zzyj4y7nhd] {
        font-size: 1.25rem;
        gap: 0.5rem;
    }
    
    .page-title i[b-zzyj4y7nhd] {
        font-size: 1rem;
    }
    
    .page-description[b-zzyj4y7nhd] {
        font-size: 0.85rem;
    }
}
/* /Pages/Membership.razor.rz.scp.css */
/* Membership Page Styles - Compact Modern Design */
.membership-container[b-x9cg1vu8bf] {
    min-height: 100vh;
    background: var(--bg-primary);
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(var(--success-color-rgb), 0.1) 0%, transparent 50%);
    color: var(--text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    padding: 1rem;
    max-width: 1400px;
    margin: 0 auto;
}

/* Header Styles */
.compact-header[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
    border-radius: 20px;
    border: 1px solid var(--border-color);
    margin-bottom: 2rem;
    box-shadow: var(--shadow);
    animation: fadeInUp-b-x9cg1vu8bf 0.6s ease-out both;
}

.header-left[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

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

.header-actions[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Modern Header Design */
.modern-header[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.08);
    animation: fadeInUp-b-x9cg1vu8bf 0.6s ease-out both;
}

.header-content[b-x9cg1vu8bf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    min-width: 0;
}

.user-section[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.user-avatar-modern[b-x9cg1vu8bf] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), 0.25);
    flex-shrink: 0;
}

.user-details[b-x9cg1vu8bf] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.user-name[b-x9cg1vu8bf] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.plan-badges[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.modern-badge[b-x9cg1vu8bf] {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: all 0.2s ease;
    line-height: 1;
}

.modern-badge.primary[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    color: white;
    box-shadow: 0 2px 12px rgba(var(--primary-color-rgb), 0.3);
}

.modern-badge.secondary[b-x9cg1vu8bf] {
    background: rgba(var(--warning-color-rgb), 0.15);
    color: var(--warning-color);
    border: 1px solid rgba(var(--warning-color-rgb), 0.25);
}

.expiry-info[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

.expiry-text[b-x9cg1vu8bf] {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(var(--warning-color-rgb), 0.1);
    color: var(--warning-color);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
    line-height: 1;
}

.expiry-text.warning[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.1);
    color: var(--danger-color);
    border-color: rgba(var(--danger-color-rgb), 0.2);
}

.actions-section[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.balance-modern[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.balance-amount[b-x9cg1vu8bf] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--success-color);
    line-height: 1.2;
}

.balance-label[b-x9cg1vu8bf] {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 0.25rem;
}

.quick-actions[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.action-btn[b-x9cg1vu8bf] {
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
}

.action-btn:hover[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.15);
    border-color: rgba(var(--primary-color-rgb), 0.3);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.action-btn.refresh-btn:hover[b-x9cg1vu8bf] {
    background: rgba(var(--success-color-rgb), 0.15);
    border-color: rgba(var(--success-color-rgb), 0.3);
}

.action-btn:disabled[b-x9cg1vu8bf] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Modern Header Responsive - Tablet and Small Desktop */
@media (max-width: 1200px) {
    .header-content[b-x9cg1vu8bf] {
        gap: 1.5rem;
    }
    
    .actions-section[b-x9cg1vu8bf] {
        gap: 1.5rem;
    }
    
    .user-name[b-x9cg1vu8bf] {
        font-size: 1.5rem;
    }
}

@media (max-width: 1024px) {
    .modern-header[b-x9cg1vu8bf] {
        padding: 1.75rem;
    }
    
    .header-content[b-x9cg1vu8bf] {
        gap: 1.25rem;
    }
    
    .actions-section[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-end;
    }
    
    .balance-modern[b-x9cg1vu8bf] {
        order: 1;
    }
    
    .quick-actions[b-x9cg1vu8bf] {
        order: 2;
        gap: 0.375rem;
    }
    
    .action-btn[b-x9cg1vu8bf] {
        width: 36px;
        height: 36px;
        font-size: 0.8rem;
    }
}

@media (max-width: 900px) {
    .header-content[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }
    
    .user-section[b-x9cg1vu8bf] {
        justify-content: center;
    }
    
    .actions-section[b-x9cg1vu8bf] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
    }
    
    .balance-modern[b-x9cg1vu8bf] {
        order: 0;
        align-items: flex-start;
        text-align: left;
    }
    
    .quick-actions[b-x9cg1vu8bf] {
        order: 1;
    }
}

/* Modern Header Responsive - Mobile */
@media (max-width: 768px) {
    .modern-header[b-x9cg1vu8bf] {
        padding: 1.5rem;
    }
    
    .header-content[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 1.5rem;
        align-items: stretch;
    }
    
    .user-section[b-x9cg1vu8bf] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .user-name[b-x9cg1vu8bf] {
        font-size: 1.5rem;
    }
    
    .actions-section[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .plan-badges[b-x9cg1vu8bf] {
        justify-content: center;
    }
    
    .expiry-info[b-x9cg1vu8bf] {
        justify-content: center;
    }
    
    .balance-modern[b-x9cg1vu8bf] {
        align-items: center;
        text-align: center;
    }
    
    .quick-actions[b-x9cg1vu8bf] {
        justify-content: center;
    }
}

/* Referral Modal Styles */
.referral-modal[b-x9cg1vu8bf] {
    max-width: 500px;
    width: 90vw;
}

.referral-content[b-x9cg1vu8bf] {
    text-align: center;
}

.referral-info[b-x9cg1vu8bf] {
    margin-bottom: 2rem;
}

.referral-icon[b-x9cg1vu8bf] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 2rem;
    color: white;
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), 0.3);
}

.referral-info h3[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.referral-info p[b-x9cg1vu8bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.referral-code-display[b-x9cg1vu8bf] {
    margin-bottom: 2rem;
}

.referral-code-container[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 0.75rem;
}

.referral-code-input[b-x9cg1vu8bf] {
    flex: 1;
    border: none;
    background: none;
    font-family: 'Courier New', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    letter-spacing: 2px;
    outline: none;
}

.copy-btn[b-x9cg1vu8bf] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    border-radius: 8px;
    white-space: nowrap;
}

.referral-instructions[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.instruction-item[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(var(--success-color-rgb), 0.1);
    border: 1px solid rgba(var(--success-color-rgb), 0.2);
    border-radius: 12px;
}

.instruction-item i[b-x9cg1vu8bf] {
    width: 20px;
    color: var(--success-color);
    font-size: 1.1rem;
}

.instruction-item span[b-x9cg1vu8bf] {
    color: var(--text-primary);
    font-weight: 500;
}

.btn-header-action[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(var(--primary-color-rgb), 0.1);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: 12px;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-header-action:hover:not(:disabled)[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.15);
    border-color: rgba(var(--primary-color-rgb), 0.3);
    transform: translateY(-1px);
}

.btn-header-action:disabled[b-x9cg1vu8bf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn-header-action i[b-x9cg1vu8bf] {
    font-size: 0.875rem;
}

.btn-header-action span[b-x9cg1vu8bf] {
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .btn-header-action span[b-x9cg1vu8bf] {
        display: none;
    }
    
    .btn-header-action[b-x9cg1vu8bf] {
        padding: 0.75rem;
    }
}

.user-avatar[b-x9cg1vu8bf] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 8px 32px rgba(var(--primary-color-rgb), 0.3);
}

.user-info h1[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
}

.user-meta[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.user-meta.side-by-side[b-x9cg1vu8bf] {
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.user-meta.side-by-side .plan-group[b-x9cg1vu8bf] {
    flex-direction: column;
    align-items: flex-start;
    min-width: 120px;
    flex: 0 0 auto;
    gap: 6px;
}

.user-meta.side-by-side .plan-badge[b-x9cg1vu8bf] {
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    width: max-content;
    max-width: none;
}

.plan-badge[b-x9cg1vu8bf] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.plan-badge.free[b-x9cg1vu8bf] {
    background: rgba(var(--text-secondary-rgb), 0.1);
    color: var(--text-secondary);
}

.plan-badge.premium[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    color: white;
}

.plan-badge.secondary[b-x9cg1vu8bf] {
    background: rgba(var(--warning-color-rgb), 0.1);
    color: var(--warning-color);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
}

.expire-badge[b-x9cg1vu8bf] {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    background: rgba(var(--warning-color-rgb), 0.1);
    color: var(--warning-color);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
}

.expire-badge.warning[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.1);
    color: var(--danger-color);
    border-color: rgba(var(--danger-color-rgb), 0.2);
}

.balance-display[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.balance-label[b-x9cg1vu8bf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.balance-value[b-x9cg1vu8bf] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.btn-icon[b-x9cg1vu8bf] {
    width: 40px;
    height: 40px;
    border: none;
    background: rgba(var(--primary-color-rgb), 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
}

.btn-icon:hover[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.15);
    transform: translateY(-1px);
}

/* Responsive Header */
@media (max-width: 768px) {
    .compact-header[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 1.5rem;
        padding: 1.5rem;
    }
    
    .header-left[b-x9cg1vu8bf] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .header-right[b-x9cg1vu8bf] {
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }
    
    .user-info h1[b-x9cg1vu8bf] {
        font-size: 1.5rem;
    }
    
    .user-meta[b-x9cg1vu8bf] {
        align-items: center;
        gap: 0.2rem;
    }
    
    .user-meta.side-by-side[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    
    .plan-group[b-x9cg1vu8bf] {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.25rem;
    }
}

/* Animation keyframes */
@keyframes fadeInUp-b-x9cg1vu8bf {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft-b-x9cg1vu8bf {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight-b-x9cg1vu8bf {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Loading States */
.loading-overlay[b-x9cg1vu8bf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(var(--bg-primary-rgb), 0.95);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-content[b-x9cg1vu8bf] {
    text-align: center;
    padding: 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
}

.loading-spinner[b-x9cg1vu8bf] {
    margin-bottom: 1.5rem;
}

.spinner[b-x9cg1vu8bf] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-x9cg1vu8bf 1s linear infinite;
}

@keyframes spin-b-x9cg1vu8bf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-content h3[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.loading-content p[b-x9cg1vu8bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Error States */
.error-state[b-x9cg1vu8bf] {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.error-card[b-x9cg1vu8bf] {
    text-align: center;
    padding: 3rem 2rem;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    max-width: 400px;
    width: 100%;
}

.error-icon[b-x9cg1vu8bf] {
    font-size: 3rem;
    color: var(--danger-color);
    margin-bottom: 1.5rem;
}

.error-card h2[b-x9cg1vu8bf] {
    margin: 0 0 1rem 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.error-card p[b-x9cg1vu8bf] {
    margin: 0 0 2rem 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.error-actions[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Compact Header */
.compact-header[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--card-bg), var(--hover-bg));
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
    animation: fadeInUp-b-x9cg1vu8bf 0.6s ease-out;
}

.compact-header[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
}

.header-left[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.user-avatar[b-x9cg1vu8bf] {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 2rem;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

.user-info h1[b-x9cg1vu8bf] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.user-meta[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-top: 0.5rem;
    max-width: 100%;
}

.plan-group[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    width: 100%;
}

.plan-badge[b-x9cg1vu8bf] {
    background: var(--primary-color);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.plan-badge:hover[b-x9cg1vu8bf] {
    transform: scale(1.05);
}

.plan-badge.premium[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.plan-badge.basic[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #6b7280, #4b5563);
}

.plan-badge.secondary[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

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

.expire-badge[b-x9cg1vu8bf] {
    background: var(--success-color);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 16px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.expire-badge:hover[b-x9cg1vu8bf] {
    transform: scale(1.05);
}

.expire-badge.warning[b-x9cg1vu8bf] {
    background: var(--warning-color);
    color: white;
    animation: pulse-b-x9cg1vu8bf 2s infinite;
}

@keyframes pulse-b-x9cg1vu8bf {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

/* Expiration Warning Banner */
.expiration-warning-banner[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.warning-content[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}

.warning-content i[b-x9cg1vu8bf] {
    font-size: 1.125rem;
    animation: pulse-b-x9cg1vu8bf 2s infinite;
}

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

.balance-display[b-x9cg1vu8bf] {
    text-align: right;
}

.balance-label[b-x9cg1vu8bf] {
    display: block;
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.balance-value[b-x9cg1vu8bf] {
    display: block;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 700;
}

.btn-icon[b-x9cg1vu8bf] {
    background: none;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-icon:hover[b-x9cg1vu8bf] {
    background: var(--hover-bg);
    color: var(--text-primary);
}

/* Content Grid */
.content-grid[b-x9cg1vu8bf] {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

/* Modern Features Panel */
.features-modern-panel[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--card-bg) 0%, rgba(var(--primary-color-rgb), 0.02) 100%);
    border-radius: 20px;
    padding: 0;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    animation: slideInLeft-b-x9cg1vu8bf 0.6s ease-out 0.1s both;
    position: relative;
}

.features-modern-panel[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
}

.features-modern-panel .panel-header[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, rgba(var(--success-color-rgb), 0.05) 100%);
    padding: 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.features-modern-panel .header-content[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    justify-content: flex-start; /* keep text next to icon, not spaced to the right */
}

/* Ensure header text is left-aligned within the features panel */
.features-modern-panel .header-text[b-x9cg1vu8bf] {
    text-align: left;
}

.features-modern-panel .header-icon[b-x9cg1vu8bf] {
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), 0.3);
}

.features-modern-panel .header-text h2[b-x9cg1vu8bf] {
    margin: 0 0 0.25rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.features-modern-panel .header-text p[b-x9cg1vu8bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.features-grid-modern[b-x9cg1vu8bf] {
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    margin: 0.5rem 0;
}

.features-table[b-x9cg1vu8bf] {
    width: 100%;
    border-collapse: collapse;
}

.features-table-header[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    text-align: left;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.features-section[b-x9cg1vu8bf] {
    border-bottom: 1px solid var(--border-color);
}

.features-section:last-child[b-x9cg1vu8bf] {
    border-bottom: none;
}

/* 2-column layout for desktop */
@media (min-width: 1024px) {
    .features-section .feature-rows-container[b-x9cg1vu8bf] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
    }
    
    .features-section .feature-row[b-x9cg1vu8bf] {
        border-right: 1px solid rgba(var(--border-color-rgb), 0.3);
        padding: 0.5rem 1rem;
    }
    
    .features-section .feature-row:nth-child(even)[b-x9cg1vu8bf] {
        border-right: none;
    }
    
    /* Remove bottom border for last row(s) */
    .features-section .feature-row:nth-last-child(-n+2)[b-x9cg1vu8bf] {
        border-bottom: none;
    }
}

.section-header[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.05);
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.feature-row[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    border-bottom: 1px solid rgba(var(--border-color-rgb), 0.3);
    transition: background-color 0.2s ease;
    min-height: 44px;
}

.feature-row:last-child[b-x9cg1vu8bf] {
    border-bottom: none;
}

.feature-row:hover[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.02);
}

.feature-icon-compact[b-x9cg1vu8bf] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    color: white;
    margin-right: 0.875rem;
    flex-shrink: 0;
}

.feature-icon-compact.cloud[b-x9cg1vu8bf] { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.feature-icon-compact.storage[b-x9cg1vu8bf] { background: linear-gradient(135deg, #667eea, #764ba2); }
.feature-icon-compact.speed[b-x9cg1vu8bf] { background: linear-gradient(135deg, #f093fb, #f5576c); }
.feature-icon-compact.notification[b-x9cg1vu8bf] { background: linear-gradient(135deg, #ffecd2, #fcb69f); color: #333; }
.feature-icon-compact.security[b-x9cg1vu8bf] { background: linear-gradient(135deg, #a8edea, #fed6e3); color: #333; }
.feature-icon-compact.backup[b-x9cg1vu8bf] { background: linear-gradient(135deg, #89f7fe, #66a6ff); }
.feature-icon-compact.limit[b-x9cg1vu8bf] { background: linear-gradient(135deg, #fdbb2d, #22c1c3); }
.feature-icon-compact.cache[b-x9cg1vu8bf] { background: linear-gradient(135deg, #e0c3fc, #9bb5ff); }
.feature-icon-compact.encryption[b-x9cg1vu8bf] { background: linear-gradient(135deg, #fa709a, #fee140); }
.feature-icon-compact.webdav[b-x9cg1vu8bf] { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }

.feature-info[b-x9cg1vu8bf] {
    flex: 1;
    min-width: 0;
}

/* Desktop optimizations for 2-column layout */
@media (min-width: 1024px) {
    .feature-info[b-x9cg1vu8bf] {
        margin-right: 0.5rem;
    }
    
    .feature-value-compact[b-x9cg1vu8bf] {
        margin-left: 0.5rem;
    }
}

.feature-name[b-x9cg1vu8bf] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.8rem;
    margin-bottom: 0.125rem;
    line-height: 1.2;
}

.feature-description[b-x9cg1vu8bf] {
    color: var(--text-secondary);
    font-size: 0.7rem;
    line-height: 1.2;
    margin: 0;
}

.feature-value-compact[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

.value-number[b-x9cg1vu8bf] {
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary-color);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
}

.value-unlimited[b-x9cg1vu8bf] {
    font-weight: 600;
    color: var(--success-color);
    font-size: 0.8rem;
}

.status-indicator[b-x9cg1vu8bf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    line-height: 1;
}

.status-indicator.enabled[b-x9cg1vu8bf] {
    background: rgba(var(--success-color-rgb), 0.15);
    color: var(--success-color);
    border: 1px solid rgba(var(--success-color-rgb), 0.3);
}

.status-indicator.disabled[b-x9cg1vu8bf] {
    background: rgba(var(--text-muted-rgb), 0.15);
    color: var(--text-muted);
    border: 1px solid rgba(var(--text-muted-rgb), 0.3);
}

.status-indicator i[b-x9cg1vu8bf] {
    font-size: 0.5rem;
}

/* Mobile responsive for compact features */
@media (max-width: 768px) {
    .features-grid-modern[b-x9cg1vu8bf] {
        margin: 0.5rem -1rem;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .features-table-header[b-x9cg1vu8bf] {
        padding: 0.75rem 1rem;
        font-size: 0.75rem;
    }
    
    .section-header[b-x9cg1vu8bf] {
        padding: 0.5rem 1rem;
        font-size: 0.75rem;
    }
    
    .feature-row[b-x9cg1vu8bf] {
        padding: 0.5rem 1rem;
        flex-direction: row;
        align-items: center;
        gap: 0.625rem;
        min-height: 40px;
    }
    
    .feature-icon-compact[b-x9cg1vu8bf] {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
        margin-right: 0.625rem;
    }
    
    .feature-info[b-x9cg1vu8bf] {
        flex: 1;
    }
    
    .feature-name[b-x9cg1vu8bf] {
        font-size: 0.75rem;
        margin-bottom: 0.1rem;
    }
    
    .feature-description[b-x9cg1vu8bf] {
        font-size: 0.65rem;
        margin-bottom: 0;
    }
    
    .feature-value-compact[b-x9cg1vu8bf] {
        margin-left: 0.5rem;
        align-self: center;
    }
    
    .value-number[b-x9cg1vu8bf] {
        font-size: 0.9rem;
    }
    
    .value-unlimited[b-x9cg1vu8bf] {
        font-size: 0.75rem;
    }
    
    .status-indicator[b-x9cg1vu8bf] {
        padding: 0.125rem 0.375rem;
        font-size: 0.6rem;
        gap: 0.1875rem;
    }
}

.status-badge.disabled[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(var(--danger-color-rgb), 0.2);
}

.value-text[b-x9cg1vu8bf] {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1rem;
}

/* Disabled feature cards */
.feature-card.disabled[b-x9cg1vu8bf] {
    opacity: 0.6;
}

.feature-card.disabled .feature-icon[b-x9cg1vu8bf] {
    background: var(--border-color);
    color: var(--text-secondary);
}

/* Modern Plans Section */
.plans-section-modern[b-x9cg1vu8bf] {
    margin-top: 3rem;
    animation: fadeInUp-b-x9cg1vu8bf 0.6s ease-out 0.3s both;
}

.section-header-modern[b-x9cg1vu8bf] {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.header-decoration[b-x9cg1vu8bf] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.decoration-icon[b-x9cg1vu8bf] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
    animation: float-b-x9cg1vu8bf 3s ease-in-out infinite;
}

@keyframes float-b-x9cg1vu8bf {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.section-header-modern h2[b-x9cg1vu8bf] {
    margin: 0 0 1rem 0;
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-header-modern p[b-x9cg1vu8bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.25rem;
    max-width: 600px;
    margin: 0 auto;
}

.plans-grid-modern[b-x9cg1vu8bf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.plan-card-modern[b-x9cg1vu8bf] {
    background: var(--card-bg);
    border-radius: 24px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    transition: all 0.4s ease;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.plan-card-modern:hover[b-x9cg1vu8bf] {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border-color: rgba(var(--primary-color-rgb), 0.3);
}

.plan-card-modern.premium-plan[b-x9cg1vu8bf] {
    border: 2px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(135deg, #667eea, #764ba2) border-box;
}

.plan-card-modern.lifetime-plan[b-x9cg1vu8bf] {
    border: 2px solid transparent;
    background: linear-gradient(var(--card-bg), var(--card-bg)) padding-box,
                linear-gradient(135deg, #f093fb, #f5576c) border-box;
}

.plan-badge[b-x9cg1vu8bf] {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    z-index: 2;
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), 0.3);
}

/* Ensure plan badge is always visible in both themes */
[data-theme="light"] .plan-badge[b-x9cg1vu8bf] {
    color: white;
}

[data-theme="dark"] .plan-badge[b-x9cg1vu8bf] {
    color: white;
}

.lifetime-plan .plan-badge[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.plan-header-modern[b-x9cg1vu8bf] {
    padding: 2rem 2rem 1rem;
    text-align: center;
    position: relative;
}

.plan-icon-container[b-x9cg1vu8bf] {
    margin-bottom: 1rem;
}

.plan-icon[b-x9cg1vu8bf] {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 8px 32px rgba(var(--primary-color-rgb), 0.3);
}

/* Ensure plan icon is always visible in both themes */
[data-theme="light"] .plan-icon[b-x9cg1vu8bf] {
    color: white;
}

[data-theme="dark"] .plan-icon[b-x9cg1vu8bf] {
    color: white;
}

.premium-plan .plan-icon[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.lifetime-plan .plan-icon[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
}

.plan-name[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
}

.plan-description[b-x9cg1vu8bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.plan-pricing-modern[b-x9cg1vu8bf] {
    padding: 1rem 2rem;
    text-align: center;
    border-bottom: 1px solid var(--border-color);
}

.price-container[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.original-price[b-x9cg1vu8bf] {
    color: var(--text-secondary);
    text-decoration: line-through;
    font-size: 1rem;
}

.current-price[b-x9cg1vu8bf] {
    display: flex;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--text-primary);
}

.currency[b-x9cg1vu8bf] {
    font-size: 1.25rem;
    font-weight: 600;
}

.amount[b-x9cg1vu8bf] {
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.price-period[b-x9cg1vu8bf] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.plan-features-toggle[b-x9cg1vu8bf] {
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--hover-bg);
}

.plan-features-toggle:hover[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.05);
}

.toggle-header[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toggle-title[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.toggle-icon[b-x9cg1vu8bf] {
    color: var(--text-secondary);
    transition: transform 0.2s ease;
}

.plan-features-modern[b-x9cg1vu8bf] {
    padding: 1.5rem 2rem;
    background: rgba(var(--primary-color-rgb), 0.02);
}

.feature-group[b-x9cg1vu8bf] {
    margin-bottom: 1.5rem;
}

.feature-group:last-child[b-x9cg1vu8bf] {
    margin-bottom: 0;
}

.feature-group h4[b-x9cg1vu8bf] {
    margin: 0 0 1rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.features-items[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.feature-item-modern[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.feature-item-modern:hover[b-x9cg1vu8bf] {
    background: var(--hover-bg);
    border-color: rgba(var(--primary-color-rgb), 0.2);
}

.feature-icon-small[b-x9cg1vu8bf] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: white;
    flex-shrink: 0;
}

/* Ensure feature icon small is always visible in both themes */
[data-theme="light"] .feature-icon-small[b-x9cg1vu8bf] {
    color: white;
}

[data-theme="dark"] .feature-icon-small[b-x9cg1vu8bf] {
    color: white;
}

.feature-icon-small.cloud[b-x9cg1vu8bf] { background: linear-gradient(135deg, #4facfe, #00f2fe); }
.feature-icon-small.storage[b-x9cg1vu8bf] { background: linear-gradient(135deg, #667eea, #764ba2); }
.feature-icon-small.speed[b-x9cg1vu8bf] { background: linear-gradient(135deg, #f093fb, #f5576c); }
.feature-icon-small.notification[b-x9cg1vu8bf] { background: linear-gradient(135deg, #ffecd2, #fcb69f); }
.feature-icon-small.security[b-x9cg1vu8bf] { background: linear-gradient(135deg, #a8edea, #fed6e3); }
.feature-icon-small.backup[b-x9cg1vu8bf] { background: linear-gradient(135deg, #89f7fe, #66a6ff); }
.feature-icon-small.encryption[b-x9cg1vu8bf] { background: linear-gradient(135deg, #fa709a, #fee140); }
.feature-icon-small.webdav[b-x9cg1vu8bf] { background: linear-gradient(135deg, #a1c4fd, #c2e9fb); }

.feature-icon-small.disabled[b-x9cg1vu8bf] {
    background: var(--border-color);
    color: var(--text-secondary);
}

.feature-content-small[b-x9cg1vu8bf] {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feature-name[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.feature-value-modern[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 12px;
}

.feature-status-small[b-x9cg1vu8bf] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.feature-status-small.enabled[b-x9cg1vu8bf] {
    background: rgba(var(--success-color-rgb), 0.2);
    color: var(--success-color);
}

.feature-status-small.disabled[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.2);
    color: var(--danger-color);
}

.plan-action-modern[b-x9cg1vu8bf] {
    padding: 2rem;
}

.btn-plan-modern[b-x9cg1vu8bf] {
    width: 100%;
    padding: 1rem 2rem;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

/* Ensure btn plan modern is always visible in both themes */
[data-theme="light"] .btn-plan-modern[b-x9cg1vu8bf] {
    color: white;
}

[data-theme="dark"] .btn-plan-modern[b-x9cg1vu8bf] {
    color: white;
}

.btn-plan-modern:hover[b-x9cg1vu8bf] {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--primary-color-rgb), 0.4);
}

.btn-plan-modern.premium[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.btn-plan-modern.premium:hover[b-x9cg1vu8bf] {
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.4);
}

.btn-plan-modern.lifetime[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    box-shadow: 0 4px 20px rgba(240, 147, 251, 0.3);
}

.btn-plan-modern.lifetime:hover[b-x9cg1vu8bf] {
    box-shadow: 0 8px 30px rgba(240, 147, 251, 0.4);
}

.btn-icon[b-x9cg1vu8bf] {
    transition: transform 0.2s ease;
}

.btn-plan-modern:hover .btn-icon[b-x9cg1vu8bf] {
    transform: translateX(4px);
}

/* Panel Styles */
.quick-actions[b-x9cg1vu8bf],
.features-panel[b-x9cg1vu8bf],
.activation-panel[b-x9cg1vu8bf] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    transition: all 0.2s ease;
    animation: slideInLeft-b-x9cg1vu8bf 0.6s ease-out 0.1s both;
}

.quick-actions:hover[b-x9cg1vu8bf],
.features-panel:hover[b-x9cg1vu8bf] {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color);
}

.activation-section[b-x9cg1vu8bf] {
    animation: fadeInUp-b-x9cg1vu8bf 0.6s ease-out 0.3s both;
}

.activation-section .activation-panel[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--card-bg), var(--hover-bg));
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.activation-section .activation-panel[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
}

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

.activation-section h2[b-x9cg1vu8bf]::before {
    content: "🎁";
    font-size: 1.5rem;
}

/* Updated Activation Section Styles */
.activation-header[b-x9cg1vu8bf] {
    text-align: center;
    margin-bottom: 2rem;
}

.activation-header h2[b-x9cg1vu8bf] {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.activation-header h2[b-x9cg1vu8bf]::before {
    content: "🎁";
    font-size: 1.5rem;
}

.activation-header p[b-x9cg1vu8bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.activation-form[b-x9cg1vu8bf] {
    max-width: 100%;
}

.activation-input-group[b-x9cg1vu8bf] {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.activation-input[b-x9cg1vu8bf] {
    flex: 1;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border-color);
    border-right: none;
    background: var(--input-bg);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
    outline: none;
    border-radius: 0;
}

.activation-input:focus[b-x9cg1vu8bf] {
    border-color: var(--primary-color);
    background: var(--card-bg);
    box-shadow: inset 0 0 0 1px var(--primary-color);
}

.activation-input:disabled[b-x9cg1vu8bf] {
    background: var(--disabled-bg);
    color: var(--text-muted);
    cursor: not-allowed;
}

.activation-input[b-x9cg1vu8bf]::placeholder {
    color: var(--text-muted);
}

.activation-btn[b-x9cg1vu8bf] {
    padding: 1rem 1.5rem;
    background: var(--primary-color);
    color: white;
    border: 1px solid var(--primary-color);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 140px;
    justify-content: center;
    border-radius: 0;
}

.activation-btn:hover:not(:disabled)[b-x9cg1vu8bf] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
}

.activation-btn:disabled[b-x9cg1vu8bf] {
    background: var(--disabled-bg);
    border-color: var(--border-color);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
}

.activation-alert[b-x9cg1vu8bf] {
    padding: 1rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    margin-top: 1rem;
    border: 1px solid;
}

.activation-alert.success[b-x9cg1vu8bf] {
    background: rgba(var(--success-color-rgb), 0.1);
    border-color: var(--success-color);
    color: var(--success-color);
}

.activation-alert.error[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.1);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.activation-alert i[b-x9cg1vu8bf] {
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Activation Confirmation Modal */
.activation-confirm-modal[b-x9cg1vu8bf] {
    max-width: 500px;
    width: 90vw;
}

.activation-confirm-content[b-x9cg1vu8bf] {
    text-align: center;
}

.activation-info[b-x9cg1vu8bf] {
    margin-bottom: 2rem;
}

.activation-icon[b-x9cg1vu8bf] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--success-color), var(--primary-color));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: white;
    box-shadow: 0 8px 24px rgba(var(--success-color-rgb), 0.3);
}

.activation-info h3[b-x9cg1vu8bf] {
    margin: 0 0 1rem 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.plan-description[b-x9cg1vu8bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.1rem;
    padding: 1rem;
    background: var(--hover-bg);
    border-radius: 12px;
    border-left: 4px solid var(--primary-color);
}

.activation-warning[b-x9cg1vu8bf] {
    text-align: left;
    background: var(--hover-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

.warning-item[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.warning-item:last-child[b-x9cg1vu8bf] {
    margin-bottom: 0;
}

.warning-item i[b-x9cg1vu8bf] {
    color: var(--primary-color);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Responsive Design for Activation Section */
@media (max-width: 768px) {
    .activation-input-group[b-x9cg1vu8bf] {
        flex-direction: column;
        border-radius: 12px;
        overflow: visible;
        box-shadow: none;
    }
    
    .activation-input[b-x9cg1vu8bf] {
        border-right: 1px solid var(--border-color);
        border-bottom: none;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .activation-btn[b-x9cg1vu8bf] {
        border-top: none;
        border-radius: 0 0 12px 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 1.25rem 1.5rem;
    }
    
    .activation-input:focus[b-x9cg1vu8bf] {
        box-shadow: inset 0 0 0 1px var(--primary-color), 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

/* Plans Section */
.plans-section[b-x9cg1vu8bf] {
    margin-top: 2rem;
}

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

.section-header h2[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
}

.section-header p[b-x9cg1vu8bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 1.125rem;
}

.plans-grid-compact[b-x9cg1vu8bf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

@media (min-width: 1200px) {
    .plans-grid-compact[b-x9cg1vu8bf] {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }
    
    .plan-card-compact[b-x9cg1vu8bf] {
        min-height: 480px;
    }
}

@media (max-width: 1199px) and (min-width: 900px) {
    .plans-grid-compact[b-x9cg1vu8bf] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
    
    .plan-card-compact[b-x9cg1vu8bf] {
        min-height: 460px;
    }
}

@media (max-width: 899px) and (min-width: 600px) {
    .plans-grid-compact[b-x9cg1vu8bf] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .plan-card-compact[b-x9cg1vu8bf] {
        min-height: 440px;
    }
}

@media (max-width: 599px) {
    .plans-grid-compact[b-x9cg1vu8bf] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .plan-card-compact[b-x9cg1vu8bf] {
        min-height: auto;
    }
    
    .plan-header-compact[b-x9cg1vu8bf] {
        padding: 1.5rem 1.5rem 1rem;
    }
    
    .plan-pricing-compact[b-x9cg1vu8bf] {
        padding: 0 1.5rem 1rem;
    }
    
    .plan-features-toggle-compact[b-x9cg1vu8bf],
    .plan-features-compact[b-x9cg1vu8bf],
    .plan-action-compact[b-x9cg1vu8bf] {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
    
    .amount-compact[b-x9cg1vu8bf] {
        font-size: 2rem;
    }
    
    .plan-icon-small[b-x9cg1vu8bf] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
    
    .feature-item-compact[b-x9cg1vu8bf] {
        padding: 0.5rem 0;
        gap: 0.75rem;
    }
    
    .feature-icon-compact[b-x9cg1vu8bf] {
        width: 28px;
        height: 28px;
        font-size: 0.75rem;
    }
    
    .feature-name-compact[b-x9cg1vu8bf] {
        font-size: 0.8rem;
    }
    
    .feature-value-compact[b-x9cg1vu8bf] {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }
    
    .btn-join-plan-modern[b-x9cg1vu8bf],
    .btn-contact-modern[b-x9cg1vu8bf] {
        height: 48px;
        font-size: 0.875rem;
    }
    
    .btn-text[b-x9cg1vu8bf] {
        font-size: 0.875rem;
    }
}

/* Plans Section Modern */
.plans-section-modern[b-x9cg1vu8bf] {
    margin: 2rem 0;
    animation: fadeInUp-b-x9cg1vu8bf 0.8s ease-out both;
    animation-delay: 0.6s;
}

.section-header-modern[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
    padding: 0 1rem;
}

.section-header-modern .header-left[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-decoration[b-x9cg1vu8bf] {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 40px rgba(var(--primary-color-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.header-decoration[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        transparent 30%, 
        rgba(255, 255, 255, 0.1) 50%, 
        transparent 70%);
    animation: shine-b-x9cg1vu8bf 3s ease-in-out infinite;
}

@keyframes shine-b-x9cg1vu8bf {
    0%, 100% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    50% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.decoration-icon[b-x9cg1vu8bf] {
    color: white;
    font-size: 2rem;
    z-index: 1;
    position: relative;
}

/* Ensure decoration icon is always visible in both themes */
[data-theme="light"] .decoration-icon[b-x9cg1vu8bf] {
    color: white;
}

[data-theme="dark"] .decoration-icon[b-x9cg1vu8bf] {
    color: white;
}

.header-text h2[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1.2;
}

.header-text p[b-x9cg1vu8bf] {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.section-header-modern .header-right[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
}

/* Global Toggle Button Enhanced */
.btn-toggle-all[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--success-color-rgb), 0.1));
    border: 2px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: 16px;
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), 0.15);
}

.btn-toggle-all:hover[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.15), rgba(var(--success-color-rgb), 0.15));
    border-color: rgba(var(--primary-color-rgb), 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(var(--primary-color-rgb), 0.25);
}

.btn-toggle-all i[b-x9cg1vu8bf] {
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn-toggle-all:hover i[b-x9cg1vu8bf] {
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .section-header-modern[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 1.5rem;
        text-align: center;
    }
    
    .section-header-modern .header-left[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 1rem;
    }
    
    .header-text h2[b-x9cg1vu8bf] {
        font-size: 1.875rem;
    }
    
    .btn-toggle-all span[b-x9cg1vu8bf] {
        display: none;
    }
    
    .btn-toggle-all[b-x9cg1vu8bf] {
        padding: 1rem;
    }
}

@media (max-width: 599px) {
    .plans-grid-compact[b-x9cg1vu8bf] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.plan-card-compact[b-x9cg1vu8bf] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

.plan-card-compact:hover[b-x9cg1vu8bf] {
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

/* Premium Plan Styling */
.plan-card-compact.premium-plan[b-x9cg1vu8bf] {
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), 0.1);
}

.plan-card-compact.premium-plan:hover[b-x9cg1vu8bf] {
    box-shadow: 0 8px 32px rgba(var(--primary-color-rgb), 0.15);
}

/* Lifetime Plan Styling */
.plan-card-compact.lifetime-plan[b-x9cg1vu8bf] {
    border-color: rgba(240, 147, 251, 0.5);
    box-shadow: 0 4px 16px rgba(240, 147, 251, 0.12);
}

.plan-card-compact.lifetime-plan:hover[b-x9cg1vu8bf] {
    box-shadow: 0 8px 32px rgba(240, 147, 251, 0.2);
}

/* Inactive Plan Styling */
.plan-card-compact.inactive-plan[b-x9cg1vu8bf] {
    opacity: 0.6;
    border-color: rgba(var(--text-secondary-rgb), 0.3);
}

.plan-card-compact.inactive-plan:hover[b-x9cg1vu8bf] {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(var(--text-secondary-rgb), 0.08);
}

/* Plan Badge Styles */
.plan-badge[b-x9cg1vu8bf] {
    position: absolute;
    top: -2px;
    right: 20px;
    background: var(--primary-color);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0 0 12px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.2);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.plan-badge.inactive[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--text-secondary), var(--border-color));
    box-shadow: 0 4px 16px rgba(var(--text-secondary-rgb), 0.2);
}

.plan-badge i[b-x9cg1vu8bf] {
    font-size: 0.875rem;
}

/* Plan Header Styles */
.plan-header-compact[b-x9cg1vu8bf] {
    padding: 2rem 2rem 1rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.plan-icon-small[b-x9cg1vu8bf] {
    width: 56px;
    height: 56px;
    background: var(--primary-color);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    color: white;
    font-size: 1.5rem;
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.2);
    transition: all 0.2s ease;
}

.plan-card-compact.lifetime-plan .plan-icon-small[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    box-shadow: 0 2px 8px rgba(240, 147, 251, 0.25);
}

.plan-card-compact.inactive-plan .plan-icon-small[b-x9cg1vu8bf] {
    background: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(var(--text-secondary-rgb), 0.15);
}

.plan-card-compact:hover .plan-icon-small[b-x9cg1vu8bf] {
    transform: scale(1.05);
}

.plan-name-compact[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
    line-height: 1.2;
}

.plan-description-compact[b-x9cg1vu8bf] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Plan Pricing Styles */
.plan-pricing-compact[b-x9cg1vu8bf] {
    padding: 0 2rem 1.5rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.original-price-compact[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: line-through;
    margin-bottom: 0.25rem;
}

.current-price-compact[b-x9cg1vu8bf] {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.currency-compact[b-x9cg1vu8bf] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--primary-color);
}

.amount-compact[b-x9cg1vu8bf] {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
}

.price-period-compact[b-x9cg1vu8bf] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Plan Features Toggle */
.plan-features-toggle-compact[b-x9cg1vu8bf] {
    padding: 0 2rem;
    margin-bottom: 1rem;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.toggle-header-compact[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(var(--primary-color-rgb), 0.08);
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
    transition: all 0.2s ease;
}

.toggle-header-compact:hover[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.12);
    border-color: rgba(var(--primary-color-rgb), 0.25);
}

.toggle-title-compact[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.875rem;
}

.toggle-icon-compact[b-x9cg1vu8bf] {
    color: var(--primary-color);
    transition: transform 0.2s ease;
}

.toggle-icon-compact i[b-x9cg1vu8bf] {
    font-size: 0.875rem;
}

/* Plan Features Enhanced */
.plan-features-compact[b-x9cg1vu8bf] {
    padding: 0 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.features-list-compact[b-x9cg1vu8bf] {
    padding: 1.5rem;
    background: rgba(var(--primary-color-rgb), 0.02);
    border-radius: 16px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.08);
}

.feature-group-compact[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.feature-item-compact[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    padding: 0.75rem 0;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.feature-item-compact:not(:last-child)[b-x9cg1vu8bf] {
    border-bottom: 1px solid rgba(var(--border-color-rgb), 0.3);
}

.feature-content-compact[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
    min-width: 0;
    width: 100%;
}

.feature-name-compact[b-x9cg1vu8bf] {
    color: var(--text-primary);
    font-weight: 600;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feature-value-compact[b-x9cg1vu8bf] {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
}

.feature-value-compact i.fa-infinity[b-x9cg1vu8bf] {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.feature-status-compact[b-x9cg1vu8bf] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}

.feature-status-compact.enabled[b-x9cg1vu8bf] {
    background: var(--success-color);
    color: white;
}

.feature-status-compact.disabled[b-x9cg1vu8bf] {
    background: var(--danger-color);
    color: white;
}

/* Modern Action Buttons */
.plan-action-compact[b-x9cg1vu8bf] {
    padding: 0 2rem 2rem;
    position: relative;
    z-index: 1;
}

.btn-join-plan-modern[b-x9cg1vu8bf],
.btn-contact-modern[b-x9cg1vu8bf] {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-join-plan-modern[b-x9cg1vu8bf] {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.2);
}

.btn-join-plan-modern.lifetime[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #f093fb, #f5576c);
    box-shadow: 0 4px 14px rgba(240, 147, 251, 0.25);
}

.btn-join-plan-modern.free[b-x9cg1vu8bf] {
    background: var(--text-secondary);
    box-shadow: 0 2px 8px rgba(var(--text-secondary-rgb), 0.2);
}

.btn-contact-modern[b-x9cg1vu8bf] {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid rgba(var(--text-secondary-rgb), 0.3);
    box-shadow: none;
}

.btn-join-plan-modern:hover[b-x9cg1vu8bf] {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb), 0.3);
}

.btn-join-plan-modern.lifetime:hover[b-x9cg1vu8bf] {
    box-shadow: 0 4px 16px rgba(107, 114, 128, 0.3);
}

.btn-join-plan-modern.free:hover[b-x9cg1vu8bf] {
    box-shadow: 0 4px 16px rgba(var(--text-secondary-rgb), 0.3);
}

.btn-contact-modern:hover[b-x9cg1vu8bf] {
    background: rgba(var(--text-secondary-rgb), 0.05);
    border-color: rgba(var(--text-secondary-rgb), 0.4);
    transform: translateY(-1px);
}

.btn-content[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    position: relative;
    z-index: 2;
}

.btn-text[b-x9cg1vu8bf] {
    font-size: 0.95rem;
    font-weight: 600;
}

.btn-icon[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    transition: transform 0.2s ease;
    color: inherit;
}

.btn-join-plan-modern:hover .btn-icon[b-x9cg1vu8bf] {
    transform: translateX(2px);
}

.btn-contact-modern:hover .btn-icon[b-x9cg1vu8bf] {
    transform: scale(1.05);
}

/* Improve arrow visibility against gray or busy backgrounds */
.btn-join-plan-modern .fa-arrow-right[b-x9cg1vu8bf] {
    filter: drop-shadow(0 0 1px rgba(0,0,0,0.35));
}

/* Removed shine effect for cleaner commercial look */

.plan-header-compact[b-x9cg1vu8bf] {
    padding: 2rem 2rem 1rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Modal Base Styles - Enhanced & Theme-Friendly */
.modal-overlay[b-x9cg1vu8bf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10050;
    animation: fadeIn-b-x9cg1vu8bf 0.4s ease-out;
}

[data-theme="dark"] .modal-overlay[b-x9cg1vu8bf] {
    background: rgba(0, 0, 0, 0.7);
}

.modal-dialog[b-x9cg1vu8bf] {
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    max-width: 500px;
    width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideIn-b-x9cg1vu8bf 0.4s ease-out;
    position: relative;
}

.modal-dialog[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(var(--primary-color-rgb), 0.02) 0%, 
        transparent 50%, 
        rgba(var(--success-color-rgb), 0.02) 100%);
    pointer-events: none;
    z-index: 0;
}

.modal-header[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--hover-bg), rgba(var(--primary-color-rgb), 0.03));
    position: relative;
    z-index: 1;
}

.modal-header h2[b-x9cg1vu8bf] {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--text-primary), var(--primary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.close-button[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.1);
    border: 2px solid transparent;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.75rem;
    border-radius: 12px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
}

.close-button:hover[b-x9cg1vu8bf] {
    background: var(--danger-color);
    color: white;
    transform: scale(1.1) rotate(90deg);
    border-color: var(--danger-color);
    box-shadow: 0 6px 20px rgba(var(--danger-color-rgb), 0.3);
}

.modal-content[b-x9cg1vu8bf] {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    max-height: calc(90vh - 160px); /* Account for header and footer */
    position: relative;
    z-index: 1;
}

.modal-footer[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--hover-bg), rgba(var(--primary-color-rgb), 0.02));
    position: relative;
    z-index: 1;
}

/* Modal Button Styles - Enhanced */
.modal-footer .btn[b-x9cg1vu8bf] {
    padding: 0.875rem 1.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 100px;
}

.modal-footer .btn-primary[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
    color: white;
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
}

.modal-footer .btn-primary:hover[b-x9cg1vu8bf] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.4);
}

.modal-footer .btn-primary:disabled[b-x9cg1vu8bf] {
    background: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.modal-footer .btn-outline[b-x9cg1vu8bf] {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--border-color);
}

.modal-footer .btn-outline:hover[b-x9cg1vu8bf] {
    background: var(--hover-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
}

.modal-footer .btn-danger[b-x9cg1vu8bf] {
    background: var(--danger-color);
    color: white;
}

.modal-footer .btn-danger:hover[b-x9cg1vu8bf] {
    background: var(--danger-color-hover);
    transform: translateY(-1px);
}

.modal-footer .btn-success[b-x9cg1vu8bf] {
    background: var(--success-color);
    color: white;
}

.modal-footer .btn-success:hover[b-x9cg1vu8bf] {
    background: var(--success-color-hover);
    transform: translateY(-1px);
}

/* Payment action buttons */
.payment-actions .btn[b-x9cg1vu8bf] {
    padding: 1rem 1.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.payment-actions .btn-primary[b-x9cg1vu8bf] {
    background: var(--primary-color);
    color: white;
}

.payment-actions .btn-primary:hover[b-x9cg1vu8bf] {
    background: var(--primary-color-hover);
    transform: translateY(-1px);
}

.payment-actions .btn-primary:disabled[b-x9cg1vu8bf] {
    background: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
}

.payment-actions .btn-outline[b-x9cg1vu8bf] {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.payment-actions .btn-outline:hover[b-x9cg1vu8bf] {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

/* Coupon button */
.coupon-input .btn[b-x9cg1vu8bf] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--primary-color);
    color: white;
    white-space: nowrap;
}

.coupon-input .btn:hover[b-x9cg1vu8bf] {
    background: var(--primary-color-hover);
}

.coupon-input .btn:disabled[b-x9cg1vu8bf] {
    background: var(--text-secondary);
    cursor: not-allowed;
}

/* Balance Log Modal Specific Styles */
.balance-log-modal[b-x9cg1vu8bf] {
    max-width: 700px;
    width: 95vw;
}

.balance-log-modal .modal-content[b-x9cg1vu8bf] {
    max-height: 60vh;
    overflow-y: auto;
}

.balance-log-list[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.balance-log-item[b-x9cg1vu8bf] {
    background: var(--hover-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.balance-log-item:hover[b-x9cg1vu8bf] {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.balance-log-header[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.balance-log-operation[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.balance-log-operation i[b-x9cg1vu8bf] {
    font-size: 1.25rem;
    width: 1.5rem;
    text-align: center;
}

.balance-log-amount[b-x9cg1vu8bf] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-color);
}

.balance-log-details[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.balance-log-detail[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.balance-log-detail i[b-x9cg1vu8bf] {
    width: 1rem;
    text-align: center;
    color: var(--text-tertiary);
}

.balance-log-after[b-x9cg1vu8bf] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
    font-weight: 500;
    color: var(--text-primary);
}

/* Transfer Balance Modal Specific Styles */
.transfer-balance-modal[b-x9cg1vu8bf] {
    max-width: 500px;
}

.transfer-form[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.current-balance[b-x9cg1vu8bf] {
    background: var(--hover-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.balance-info[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.balance-info i[b-x9cg1vu8bf] {
    font-size: 1.5rem;
    color: var(--primary-color);
}

.balance-text[b-x9cg1vu8bf] {
    flex: 1;
}

.balance-label[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.balance-amount[b-x9cg1vu8bf] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.form-group[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label[b-x9cg1vu8bf] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-control[b-x9cg1vu8bf] {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s ease;
    font-family: inherit;
}

.form-control:focus[b-x9cg1vu8bf] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.form-control[b-x9cg1vu8bf]::placeholder {
    color: var(--text-tertiary);
}

.amount-input[b-x9cg1vu8bf] {
    position: relative;
}

.amount-input[b-x9cg1vu8bf]::before {
    content: "¥";
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-weight: 500;
    z-index: 1;
}

.amount-input .form-control[b-x9cg1vu8bf] {
    padding-left: 2rem;
}

.transfer-warning[b-x9cg1vu8bf] {
    background: var(--warning-bg);
    border: 1px solid var(--warning-color);
    border-radius: 8px;
    padding: 1rem;
    color: var(--warning-text);
    font-size: 0.875rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.transfer-warning i[b-x9cg1vu8bf] {
    color: var(--warning-color);
    margin-top: 0.125rem;
}

.transfer-message[b-x9cg1vu8bf] {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.transfer-message.success[b-x9cg1vu8bf] {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-color);
}

.transfer-message.error[b-x9cg1vu8bf] {
    background: var(--danger-bg);
    color: var(--danger-text);
    border: 1px solid var(--danger-color);
}

/* Payment Modal Specific Styles - Enhanced */
.payment-modal[b-x9cg1vu8bf] {
    max-width: 650px;
    width: 95vw;
    position: relative;
    overflow: hidden;
}

.payment-modal[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--success-color), var(--primary-color));
    background-size: 200% 100%;
    animation: gradientMove-b-x9cg1vu8bf 3s ease-in-out infinite;
}

@keyframes gradientMove-b-x9cg1vu8bf {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.payment-form[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.plan-summary[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.1), rgba(var(--success-color-rgb), 0.05));
    border-radius: 16px;
    padding: 2rem;
    border: 2px solid rgba(var(--primary-color-rgb), 0.2);
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
}

.plan-summary[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 70%);
    animation: pulse-b-x9cg1vu8bf 4s ease-in-out infinite;
}

@keyframes pulse-b-x9cg1vu8bf {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

.plan-summary h3[b-x9cg1vu8bf] {
    margin: 0 0 0.75rem 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.plan-summary h3[b-x9cg1vu8bf]::before {
    content: '⭐';
    font-size: 1.25rem;
    animation: sparkle-b-x9cg1vu8bf 2s ease-in-out infinite;
}

@keyframes sparkle-b-x9cg1vu8bf {
    0%, 100% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.2) rotate(180deg); }
}

.plan-summary .price[b-x9cg1vu8bf] {
    font-size: 2rem;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    z-index: 1;
}

.coupon-section[b-x9cg1vu8bf] {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 2rem;
    border: 2px solid var(--border-color);
    position: relative;
    transition: all 0.3s ease;
}

.coupon-section:hover[b-x9cg1vu8bf] {
    border-color: var(--primary-color);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.15);
}

.coupon-section h4[b-x9cg1vu8bf] {
    margin: 0 0 1.5rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.coupon-section h4[b-x9cg1vu8bf]::before {
    content: '🎟️';
    font-size: 1.25rem;
}

.coupon-input[b-x9cg1vu8bf] {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
}

.coupon-input .form-control[b-x9cg1vu8bf] {
    flex: 1;
    padding: 1rem;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    transition: all 0.3s ease;
}

.coupon-input .form-control:focus[b-x9cg1vu8bf] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1);
}

.coupon-input .btn[b-x9cg1vu8bf] {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
    border: none;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.coupon-input .btn[b-x9cg1vu8bf]::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 ease;
}

.coupon-input .btn:hover[b-x9cg1vu8bf]::before {
    left: 100%;
}

.coupon-input .btn:hover[b-x9cg1vu8bf] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.3);
}

.coupon-message[b-x9cg1vu8bf] {
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    animation: slideInUp-b-x9cg1vu8bf 0.3s ease-out;
}

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

.coupon-message.success[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--success-bg), rgba(var(--success-color-rgb), 0.1));
    color: var(--success-text);
    border: 2px solid var(--success-color);
    box-shadow: 0 4px 15px rgba(var(--success-color-rgb), 0.2);
}

.coupon-message.success i[b-x9cg1vu8bf] {
    animation: checkBounce-b-x9cg1vu8bf 0.6s ease-out;
}

@keyframes checkBounce-b-x9cg1vu8bf {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.coupon-message.error[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--danger-bg), rgba(var(--danger-color-rgb), 0.1));
    color: var(--danger-text);
    border: 2px solid var(--danger-color);
    box-shadow: 0 4px 15px rgba(var(--danger-color-rgb), 0.2);
}

.coupon-message.error i[b-x9cg1vu8bf] {
    animation: shake-b-x9cg1vu8bf 0.5s ease-in-out;
}

@keyframes shake-b-x9cg1vu8bf {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.order-summary[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--hover-bg), rgba(var(--primary-color-rgb), 0.03));
    border-radius: 16px;
    padding: 2rem;
    border: 2px solid var(--border-color);
    position: relative;
    overflow: hidden;
}

.order-summary[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(var(--primary-color-rgb), 0.1) 0%, transparent 70%);
    border-radius: 50%;
    transform: translate(30px, -30px);
}

.order-summary h4[b-x9cg1vu8bf] {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.order-summary h4[b-x9cg1vu8bf]::before {
    content: '📋';
    font-size: 1.25rem;
}

.order-line[b-x9cg1vu8bf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(var(--border-color-rgb), 0.5);
    font-size: 0.95rem;
    position: relative;
    z-index: 1;
}

.order-line:last-child[b-x9cg1vu8bf] {
    border-bottom: none;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--primary-color);
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 2px solid var(--primary-color);
    background: rgba(var(--primary-color-rgb), 0.05);
    margin: 0.5rem -1rem 0;
    padding: 1rem;
    border-radius: 8px;
}

.order-line.discount[b-x9cg1vu8bf] {
    color: var(--success-color);
    font-weight: 600;
}

.order-line.discount span:last-child[b-x9cg1vu8bf] {
    color: var(--success-color);
}

.payment-actions[b-x9cg1vu8bf] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
}

.payment-actions .btn[b-x9cg1vu8bf] {
    flex: 1;
    padding: 1.25rem 2rem;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    position: relative;
    overflow: hidden;
}

.payment-actions .btn-primary[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
    color: white;
    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.3);
}

.payment-actions .btn-primary[b-x9cg1vu8bf]::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.6s ease;
}

.payment-actions .btn-primary:hover[b-x9cg1vu8bf] {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(var(--primary-color-rgb), 0.4);
}

.payment-actions .btn-primary:hover[b-x9cg1vu8bf]::before {
    left: 100%;
}

.payment-actions .btn-primary:disabled[b-x9cg1vu8bf] {
    background: var(--text-secondary);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.payment-actions .btn-primary i[b-x9cg1vu8bf] {
    font-size: 1.125rem;
}

.payment-methods[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 1rem;
}

.payment-methods h4[b-x9cg1vu8bf] {
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.payment-methods h4[b-x9cg1vu8bf]::before {
    content: '💳';
    font-size: 1.25rem;
}

.payment-method-btn[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem 2rem;
    background: linear-gradient(135deg, var(--card-bg), var(--hover-bg));
    border: 2px solid var(--border-color);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 500;
    position: relative;
    overflow: hidden;
}

.payment-method-btn[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-color-rgb), 0.1), transparent);
    transition: left 0.5s ease;
}

.payment-method-btn:hover[b-x9cg1vu8bf] {
    border-color: var(--primary-color);
    background: linear-gradient(135deg, var(--hover-bg), rgba(var(--primary-color-rgb), 0.05));
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(var(--primary-color-rgb), 0.15);
}

.payment-method-btn:hover[b-x9cg1vu8bf]::before {
    left: 100%;
}

.payment-method-btn i[b-x9cg1vu8bf] {
    font-size: 2rem;
    color: var(--primary-color);
    animation: float-b-x9cg1vu8bf 3s ease-in-out infinite;
}

@keyframes float-b-x9cg1vu8bf {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

.payment-method-text[b-x9cg1vu8bf] {
    flex: 1;
}

.payment-method-name[b-x9cg1vu8bf] {
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.payment-method-desc[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* Loading states - Enhanced */
.loading-spinner[b-x9cg1vu8bf] {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 3px solid transparent;
    border-top: 3px solid currentColor;
    border-radius: 50%;
    animation: spin-b-x9cg1vu8bf 1s linear infinite;
}

.payment-actions .loading-spinner[b-x9cg1vu8bf] {
    width: 1.5rem;
    height: 1.5rem;
    border-width: 3px;
}

@keyframes spin-b-x9cg1vu8bf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Enhanced modal animations */
@keyframes fadeIn-b-x9cg1vu8bf {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideIn-b-x9cg1vu8bf {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* New plan features highlight section in payment modal */
.plan-features-highlight[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1.5rem;
    position: relative;
    z-index: 1;
}

.feature-highlight[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text-primary);
}

.feature-highlight i[b-x9cg1vu8bf] {
    color: var(--success-color);
    font-size: 1rem;
    animation: checkPulse-b-x9cg1vu8bf 2s ease-in-out infinite;
}

.feature-highlight.more[b-x9cg1vu8bf] {
    color: var(--text-secondary);
    font-style: italic;
}

.feature-highlight.more i[b-x9cg1vu8bf] {
    color: var(--primary-color);
    animation: rotatePulse-b-x9cg1vu8bf 3s ease-in-out infinite;
}

@keyframes checkPulse-b-x9cg1vu8bf {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes rotatePulse-b-x9cg1vu8bf {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(90deg); }
    50% { transform: scale(1) rotate(180deg); }
    75% { transform: scale(1.1) rotate(270deg); }
}

/* Payment completion success animation */
.payment-success-animation[b-x9cg1vu8bf] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(var(--success-color-rgb), 0.9), rgba(var(--primary-color-rgb), 0.8));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: white;
    z-index: 100;
    animation: slideDown-b-x9cg1vu8bf 0.5s ease-out;
}

.success-icon[b-x9cg1vu8bf] {
    font-size: 4rem;
    animation: successBounce-b-x9cg1vu8bf 0.8s ease-out;
    margin-bottom: 1rem;
}

.success-message[b-x9cg1vu8bf] {
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    animation: fadeInUp-b-x9cg1vu8bf 0.6s ease-out 0.3s both;
}

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

@keyframes successBounce-b-x9cg1vu8bf {
    0% { transform: scale(0) rotate(0deg); }
    50% { transform: scale(1.3) rotate(180deg); }
    100% { transform: scale(1) rotate(360deg); }
}

/* Enhanced button hover effects for payment actions */
.payment-actions .btn[b-x9cg1vu8bf]::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.payment-actions .btn:active[b-x9cg1vu8bf]::after {
    width: 300px;
    height: 300px;
}

/* Floating elements animation */
.floating-elements[b-x9cg1vu8bf] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.floating-elements[b-x9cg1vu8bf]::before,
.floating-elements[b-x9cg1vu8bf]::after {
    content: '';
    position: absolute;
    background: rgba(var(--primary-color-rgb), 0.1);
    border-radius: 50%;
    animation: float-b-x9cg1vu8bf 6s ease-in-out infinite;
}

.floating-elements[b-x9cg1vu8bf]::before {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 10%;
    animation-delay: 0s;
}

.floating-elements[b-x9cg1vu8bf]::after {
    width: 60px;
    height: 60px;
    bottom: 15%;
    left: 15%;
    animation-delay: 3s;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .modal-dialog[b-x9cg1vu8bf] {
        width: 95vw;
        margin: 1rem;
    }
    
    .modal-header[b-x9cg1vu8bf],
    .modal-content[b-x9cg1vu8bf],
    .modal-footer[b-x9cg1vu8bf] {
        padding: 1rem;
    }
    
    .balance-log-item[b-x9cg1vu8bf] {
        padding: 1rem;
    }
    
    .coupon-input[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .coupon-input .btn[b-x9cg1vu8bf] {
        width: 100%;
    }
    
    .payment-actions[b-x9cg1vu8bf] {
        flex-direction: column;
    }
}

/* Contact Us Button for Inactive Plans */
.btn-contact-us[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.5rem;
    background: rgba(var(--warning-color-rgb), 0.1);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
    border-radius: 12px;
    color: var(--warning-color);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    margin-top: 1rem;
}

.btn-contact-us:hover[b-x9cg1vu8bf] {
    background: rgba(var(--warning-color-rgb), 0.15);
    border-color: rgba(var(--warning-color-rgb), 0.3);
    transform: translateY(-1px);
    color: var(--warning-color);
    text-decoration: none;
}

.btn-contact-us i[b-x9cg1vu8bf] {
    font-size: 0.875rem;
}

/* Inactive Plan Card Styling */
.plan-card-compact.inactive[b-x9cg1vu8bf] {
    opacity: 0.8;
    background: rgba(var(--text-secondary-rgb), 0.02);
    border-color: rgba(var(--text-secondary-rgb), 0.2);
}

.plan-card-compact.inactive .plan-title[b-x9cg1vu8bf] {
    color: var(--text-secondary);
}

.plan-card-compact.inactive .plan-price[b-x9cg1vu8bf] {
    color: var(--text-secondary);
}

.plan-card-compact.inactive:hover[b-x9cg1vu8bf] {
    transform: translateY(-2px);
    border-color: rgba(var(--warning-color-rgb), 0.3);
}

/* New Activation Modal Styles */
.activation-modal-backdrop[b-x9cg1vu8bf] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: fadeIn-b-x9cg1vu8bf 0.2s ease-out;
}

.activation-modal-container[b-x9cg1vu8bf] {
    background: var(--card-bg);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-x9cg1vu8bf 0.3s ease-out;
}

.activation-modal-header[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, rgba(var(--primary-color-rgb), 0.05) 0%, transparent 100%);
}

.activation-modal-title[b-x9cg1vu8bf] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.activation-modal-close[b-x9cg1vu8bf] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.activation-modal-close:hover[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.1);
    color: var(--danger-color);
    transform: scale(1.1);
}

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

.activation-success-icon[b-x9cg1vu8bf] {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem;
    background: linear-gradient(135deg, var(--success-color) 0%, #28a745 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.75rem;
    box-shadow: 0 8px 20px rgba(var(--success-color-rgb), 0.3);
    animation: iconPulse-b-x9cg1vu8bf 0.6s ease-out;
}

.activation-success-title[b-x9cg1vu8bf] {
    margin: 0 0 1rem;
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--text-primary);
}

.activation-plan-description[b-x9cg1vu8bf] {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.activation-warning-list[b-x9cg1vu8bf] {
    margin-top: 1.5rem;
    text-align: left;
}

.activation-warning-item[b-x9cg1vu8bf] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    background: rgba(var(--warning-color-rgb), 0.1);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
    border-radius: 8px;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.activation-warning-item i[b-x9cg1vu8bf] {
    color: var(--warning-color);
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.activation-modal-footer[b-x9cg1vu8bf] {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: rgba(var(--bg-secondary), 0.3);
}

.activation-btn-primary[b-x9cg1vu8bf] {
    flex: 1;
    background: linear-gradient(135deg, var(--primary-color) 0%, #0056b3 100%);
    color: white;
    border: none;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

.activation-btn-primary:hover:not(:disabled)[b-x9cg1vu8bf] {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--primary-color-rgb), 0.4);
    background: linear-gradient(135deg, #0056b3 0%, var(--primary-color) 100%);
}

.activation-btn-primary:disabled[b-x9cg1vu8bf] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.2);
}

.activation-btn-secondary[b-x9cg1vu8bf] {
    flex: 1;
    background: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.activation-btn-secondary:hover:not(:disabled)[b-x9cg1vu8bf] {
    background: rgba(var(--text-secondary-rgb), 0.1);
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

.activation-btn-secondary:disabled[b-x9cg1vu8bf] {
    opacity: 0.5;
    cursor: not-allowed;
}

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

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

@keyframes iconPulse-b-x9cg1vu8bf {
    0% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile responsive */
@media (max-width: 640px) {
    .activation-modal-backdrop[b-x9cg1vu8bf] {
        padding: 0.5rem;
    }
    
    .activation-modal-header[b-x9cg1vu8bf] {
        padding: 1rem;
    }
    
    .activation-modal-body[b-x9cg1vu8bf] {
        padding: 1.5rem 1rem;
    }
    
    .activation-modal-footer[b-x9cg1vu8bf] {
        flex-direction: column;
        padding: 1rem;
    }
    
    .activation-success-icon[b-x9cg1vu8bf] {
        width: 56px;
        height: 56px;
        font-size: 1.5rem;
    }
    
    .activation-success-title[b-x9cg1vu8bf] {
        font-size: 1.25rem;
    }
}

/* ===== PROFESSIONAL MODAL SYSTEM ===== */

/* Professional Modal Base - Theme-Friendly */
.professional-modal[b-x9cg1vu8bf] {
    max-width: 500px;
    width: 90vw;
    max-height: 95vh;
    background: var(--card-bg);
    border-radius: 16px;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-color);
    overflow: hidden;
    position: relative;
    animation: modalSlideIn-b-x9cg1vu8bf 0.3s ease-out both;
    margin: 1rem auto;
}

[data-theme="dark"] .professional-modal[b-x9cg1vu8bf] {
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.1);
}

.professional-modal[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
}

/* Modal Header - Theme-Friendly */
.professional-modal .modal-header[b-x9cg1vu8bf] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

[data-theme="light"] .professional-modal .modal-header[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, 
        rgba(var(--primary-color-rgb), 0.02) 0%, 
        var(--bg-secondary) 100%);
}

[data-theme="dark"] .professional-modal .modal-header[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, 
        rgba(var(--primary-color-rgb), 0.1) 0%, 
        var(--bg-secondary) 100%);
}

.modal-header-content[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.modal-icon[b-x9cg1vu8bf] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

/* Ensure modal icons are always visible with proper contrast */
[data-theme="light"] .modal-icon[b-x9cg1vu8bf] {
    color: white;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
}

[data-theme="dark"] .modal-icon[b-x9cg1vu8bf] {
    color: white;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-color-hover) 100%);
}

.modal-icon.aliyun-icon[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

.modal-icon.cloud115-icon[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.modal-title-section[b-x9cg1vu8bf] {
    flex: 1;
}

.modal-title[b-x9cg1vu8bf] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.modal-subtitle[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.4;
}

.modal-close-btn[b-x9cg1vu8bf] {
    position: absolute;
    top: 0.75rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(var(--text-secondary-rgb), 0.1);
    color: var(--text-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
}

.modal-close-btn:hover[b-x9cg1vu8bf] {
    background: rgba(var(--text-secondary-rgb), 0.2);
    color: var(--text-primary);
    transform: scale(1.05);
}

/* Modal Body */
.professional-modal .modal-body[b-x9cg1vu8bf] {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    max-height: calc(95vh - 160px);
}

/* Modal Footer */
.professional-modal .modal-footer[b-x9cg1vu8bf] {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: rgba(var(--bg-tertiary-rgb), 0.5);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

/* ===== BALANCE LOG MODAL - Theme-Friendly ===== */
.balance-log-modal[b-x9cg1vu8bf] {
    max-width: 900px;
    width: 90vw;
}

.balance-transactions-table[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    background: var(--card-bg);
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .balance-transactions-table[b-x9cg1vu8bf] {
    background: var(--bg-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.table-header[b-x9cg1vu8bf] {
    display: grid;
    grid-template-columns: 140px 120px 200px 160px 120px;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    box-sizing: border-box;
}

[data-theme="dark"] .table-header[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
}

.header-cell[b-x9cg1vu8bf] {
    padding: 1rem 0.75rem;
    font-weight: 600;
    font-size: 0.875rem;
    color: white;
    text-align: left;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.header-cell:last-child[b-x9cg1vu8bf] {
    border-right: none;
}

.header-cell.amount[b-x9cg1vu8bf],
.header-cell.balance[b-x9cg1vu8bf] {
    justify-content: flex-end;
    text-align: right;
}

.table-body[b-x9cg1vu8bf] {
    background: var(--card-bg);
}

[data-theme="dark"] .table-body[b-x9cg1vu8bf] {
    background: var(--bg-secondary);
}

.transaction-row[b-x9cg1vu8bf] {
    display: grid;
    grid-template-columns: 140px 120px 200px 160px 120px;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.transaction-row:hover[b-x9cg1vu8bf] {
    background: var(--hover-bg);
    transform: scale(1.001);
}

.transaction-row:last-child[b-x9cg1vu8bf] {
    border-bottom: none;
}

.cell[b-x9cg1vu8bf] {
    padding: 1rem 0.75rem;
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-right: 1px solid var(--border-color);
    box-sizing: border-box;
}

.cell:last-child[b-x9cg1vu8bf] {
    border-right: none;
}

.amount-cell[b-x9cg1vu8bf],
.balance-cell[b-x9cg1vu8bf] {
    justify-content: flex-end;
}

.operation-badge[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.operation-badge.deposit[b-x9cg1vu8bf] {
    background: rgba(var(--success-color-rgb), 0.1);
    color: var(--success-color);
    border: 1px solid rgba(var(--success-color-rgb), 0.2);
}

.operation-badge.withdrawal[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(var(--danger-color-rgb), 0.2);
}

.operation-badge.transfer[b-x9cg1vu8bf] {
    background: rgba(var(--info-color-rgb), 0.1);
    color: var(--info-color);
    border: 1px solid rgba(var(--info-color-rgb), 0.2);
}

.operation-badge.purchase[b-x9cg1vu8bf] {
    background: rgba(var(--warning-color-rgb), 0.1);
    color: var(--warning-color);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
}

.transaction-amount.positive[b-x9cg1vu8bf] {
    color: var(--success-color);
    font-weight: 600;
}

.transaction-amount.negative[b-x9cg1vu8bf] {
    color: var(--danger-color);
    font-weight: 600;
}

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

.source-name[b-x9cg1vu8bf] {
    font-weight: 500;
    color: var(--text-primary);
}

.operation-id[b-x9cg1vu8bf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: monospace;
}

.no-source[b-x9cg1vu8bf] {
    color: var(--text-muted);
    font-style: italic;
}

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

.date-primary[b-x9cg1vu8bf] {
    font-weight: 500;
    color: var(--text-primary);
}

.date-secondary[b-x9cg1vu8bf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: monospace;
}

.balance-amount[b-x9cg1vu8bf] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Loading and Empty States */
.loading-state[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.loading-spinner[b-x9cg1vu8bf] {
    margin-bottom: 1rem;
}

.spinner[b-x9cg1vu8bf] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-x9cg1vu8bf 1s linear infinite;
}

@keyframes spin-b-x9cg1vu8bf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text[b-x9cg1vu8bf] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
}

.empty-state[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
}

.empty-icon[b-x9cg1vu8bf] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(var(--text-secondary-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.empty-title[b-x9cg1vu8bf] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.empty-description[b-x9cg1vu8bf] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .balance-log-modal[b-x9cg1vu8bf] {
        width: 95vw;
        max-width: none;
    }
    
    .table-header[b-x9cg1vu8bf],
    .transaction-row[b-x9cg1vu8bf] {
        grid-template-columns: 1fr;
        gap: 0;
    }
    
    .cell[b-x9cg1vu8bf] {
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0.75rem;
    }
    
    .cell[b-x9cg1vu8bf]:before {
        content: attr(data-label) ": ";
        font-weight: 600;
        color: var(--text-secondary);
        margin-right: 0.5rem;
    }
    
    .header-cell[b-x9cg1vu8bf] {
        display: none;
    }
}

/* ===== TRANSFER BALANCE MODAL - Theme-Friendly ===== */
.transfer-balance-modal[b-x9cg1vu8bf] {
    max-width: 500px;
}

.current-balance-card[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, 
        rgba(var(--primary-color-rgb), 0.05) 0%, 
        rgba(var(--success-color-rgb), 0.02) 100%);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.1);
}

[data-theme="dark"] .current-balance-card[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, 
        rgba(var(--primary-color-rgb), 0.1) 0%, 
        rgba(var(--success-color-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.balance-display[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.balance-icon[b-x9cg1vu8bf] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

/* Ensure balance icon is always visible in both themes */
[data-theme="light"] .balance-icon[b-x9cg1vu8bf] {
    color: white;
}

[data-theme="dark"] .balance-icon[b-x9cg1vu8bf] {
    color: white;
}

.balance-info[b-x9cg1vu8bf] {
    flex: 1;
}

.balance-label[b-x9cg1vu8bf] {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.balance-amount[b-x9cg1vu8bf] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.transfer-form[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-label[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-label i[b-x9cg1vu8bf] {
    color: var(--primary-color);
}

.form-input[b-x9cg1vu8bf] {
    padding: 0.875rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    background: var(--card-bg);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

[data-theme="dark"] .form-input[b-x9cg1vu8bf] {
    background: var(--bg-tertiary);
}

.form-input:focus[b-x9cg1vu8bf] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.form-input:disabled[b-x9cg1vu8bf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.amount-input-wrapper[b-x9cg1vu8bf] {
    position: relative;
    display: flex;
    align-items: center;
}

.currency-symbol[b-x9cg1vu8bf] {
    position: absolute;
    left: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
    z-index: 2;
}

.amount-input[b-x9cg1vu8bf] {
    padding-left: 2.5rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-weight: 600;
}

.security-notice[b-x9cg1vu8bf] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(var(--warning-color-rgb), 0.1);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
    border-radius: 12px;
}

.notice-icon[b-x9cg1vu8bf] {
    color: var(--warning-color);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.notice-content h4[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--warning-color);
}

.notice-content p[b-x9cg1vu8bf] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.alert[b-x9cg1vu8bf] {
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.alert-success[b-x9cg1vu8bf] {
    background: rgba(var(--success-color-rgb), 0.1);
    border: 1px solid rgba(var(--success-color-rgb), 0.2);
    color: var(--success-color);
}

.alert-error[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.1);
    border: 1px solid rgba(var(--danger-color-rgb), 0.2);
    color: var(--danger-color);
}

/* ===== TRANSFER CONFIRMATION MODAL ===== */
.transfer-confirm-modal[b-x9cg1vu8bf] {
    max-width: 500px;
}

.transfer-confirmation-details[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.confirmation-section[b-x9cg1vu8bf] {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
}

[data-theme="dark"] .confirmation-section[b-x9cg1vu8bf] {
    background: var(--bg-tertiary);
}

.section-title[b-x9cg1vu8bf] {
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.detail-row[b-x9cg1vu8bf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-color);
}

.detail-row:last-child[b-x9cg1vu8bf] {
    border-bottom: none;
}

.detail-row.remaining-balance[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.05);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 0.5rem;
}

[data-theme="dark"] .detail-row.remaining-balance[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.1);
}

.detail-label[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.detail-label i[b-x9cg1vu8bf] {
    color: var(--primary-color);
}

/* Ensure detail icons are always visible in both themes */
[data-theme="light"] .detail-label i[b-x9cg1vu8bf] {
    color: var(--primary-color);
}

[data-theme="dark"] .detail-label i[b-x9cg1vu8bf] {
    color: var(--primary-color);
}

/* Force FontAwesome icons in transfer modal to use correct colors */
.transfer-confirm-modal .detail-label .fas[b-x9cg1vu8bf],
.transfer-confirm-modal .detail-label .fa[b-x9cg1vu8bf] {
    color: var(--primary-color) !important;
}

[data-theme="light"] .transfer-confirm-modal .detail-label .fas[b-x9cg1vu8bf],
[data-theme="light"] .transfer-confirm-modal .detail-label .fa[b-x9cg1vu8bf] {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .transfer-confirm-modal .detail-label .fas[b-x9cg1vu8bf],
[data-theme="dark"] .transfer-confirm-modal .detail-label .fa[b-x9cg1vu8bf] {
    color: var(--primary-color) !important;
}

/* Ultra-specific override for wallet icon in light theme */
[data-theme="light"] .transfer-confirm-modal .detail-label i.fas.fa-wallet[b-x9cg1vu8bf],
[data-theme="light"] .transfer-confirm-modal .detail-label i.fa-wallet[b-x9cg1vu8bf] {
    color: #0d6efd !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Override for all FontAwesome icons in light theme modals */
[data-theme="light"] .modal .detail-label i[b-x9cg1vu8bf],
[data-theme="light"] .modal .detail-label .fas[b-x9cg1vu8bf],
[data-theme="light"] .modal .detail-label .fa[b-x9cg1vu8bf] {
    color: #0d6efd !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Force all detail label icons to use hardcoded colors */
[data-theme="light"] .detail-label i.fas[b-x9cg1vu8bf],
[data-theme="light"] .detail-label i.fa[b-x9cg1vu8bf],
[data-theme="light"] .detail-label .fas[b-x9cg1vu8bf],
[data-theme="light"] .detail-label .fa[b-x9cg1vu8bf] {
    color: #0d6efd !important;
}

[data-theme="dark"] .detail-label i.fas[b-x9cg1vu8bf],
[data-theme="dark"] .detail-label i.fa[b-x9cg1vu8bf],
[data-theme="dark"] .detail-label .fas[b-x9cg1vu8bf],
[data-theme="dark"] .detail-label .fa[b-x9cg1vu8bf] {
    color: #4dabf7 !important;
}

/* Most aggressive override - force all icons everywhere in light theme */
html[data-theme="light"] .detail-label i[b-x9cg1vu8bf],
html[data-theme="light"] .detail-label i.fas[b-x9cg1vu8bf],
html[data-theme="light"] .detail-label i.fa[b-x9cg1vu8bf],
html[data-theme="light"] .detail-label .fas[b-x9cg1vu8bf],
html[data-theme="light"] .detail-label .fa[b-x9cg1vu8bf],
[data-theme="light"] .modal-body .detail-label i[b-x9cg1vu8bf],
[data-theme="light"] .modal-content .detail-label i[b-x9cg1vu8bf],
[data-theme="light"] .modal .detail-label i[b-x9cg1vu8bf] {
    color: #0d6efd !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: inline-block !important;
}

/* Specific targeting for FontAwesome wallet, coins, and calculator icons */
html[data-theme="light"] .fa-wallet[b-x9cg1vu8bf],
html[data-theme="light"] .fa-coins[b-x9cg1vu8bf],
html[data-theme="light"] .fa-calculator[b-x9cg1vu8bf],
html[data-theme="light"] i.fa-wallet[b-x9cg1vu8bf],
html[data-theme="light"] i.fa-coins[b-x9cg1vu8bf],
html[data-theme="light"] i.fa-calculator[b-x9cg1vu8bf] {
    color: #0d6efd !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.detail-value[b-x9cg1vu8bf] {
    font-weight: 600;
    color: var(--text-primary);
}

.detail-value.amount[b-x9cg1vu8bf] {
    font-size: 1.125rem;
    color: var(--primary-color);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

.warning-section[b-x9cg1vu8bf] {
    background: rgba(var(--warning-color-rgb), 0.05);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
    border-radius: 12px;
    padding: 1rem;
}

.warning-title[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--warning-color);
}

.warning-list[b-x9cg1vu8bf] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.warning-list li[b-x9cg1vu8bf] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.warning-list li[b-x9cg1vu8bf]:before {
    content: "•";
    color: var(--warning-color);
    font-weight: bold;
    flex-shrink: 0;
}

/* Modal Footer Styles */
.professional-modal .modal-footer[b-x9cg1vu8bf] {
    padding: 0.75rem 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

[data-theme="dark"] .professional-modal .modal-footer[b-x9cg1vu8bf] {
    background: var(--bg-tertiary);
}

/* Button Styles for Modals */
.btn[b-x9cg1vu8bf] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.875rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.btn-primary[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-hover));
    color: white;
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb), 0.3);
}

.btn-primary:hover:not(:disabled)[b-x9cg1vu8bf] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.4);
}

.btn-secondary[b-x9cg1vu8bf] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-x9cg1vu8bf] {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.btn-danger[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--danger-color), var(--danger-color-hover));
    color: white;
    box-shadow: 0 2px 8px rgba(var(--danger-color-rgb), 0.3);
}

.btn-danger:hover:not(:disabled)[b-x9cg1vu8bf] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--danger-color-rgb), 0.4);
}

.btn:disabled[b-x9cg1vu8bf] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.operation-badge.deposit[b-x9cg1vu8bf] {
    background: rgba(34, 197, 94, 0.15);
    color: #059669;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.operation-badge.refund[b-x9cg1vu8bf] {
    background: rgba(59, 130, 246, 0.15);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.operation-badge.unknown[b-x9cg1vu8bf] {
    background: rgba(107, 114, 128, 0.15);
    color: #6b7280;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

.operation-badge i[b-x9cg1vu8bf] {
    font-size: 0.75rem;
}

.amount-cell[b-x9cg1vu8bf] {
    justify-content: flex-end;
    align-items: center;
}

.transaction-amount[b-x9cg1vu8bf] {
    font-weight: 700;
    font-size: 0.875rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
}

.transaction-amount.positive[b-x9cg1vu8bf] {
    color: #059669;
}

.transaction-amount.negative[b-x9cg1vu8bf] {
    color: #dc2626;
}

.source-cell[b-x9cg1vu8bf] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 0.75rem;
    overflow: hidden;
}

.source-info[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
    overflow: hidden;
}

.source-name[b-x9cg1vu8bf] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.operation-id[b-x9cg1vu8bf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
    background: var(--bg-secondary);
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
    align-self: flex-start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.no-source[b-x9cg1vu8bf] {
    color: var(--text-muted);
    font-style: italic;
}

.date-cell[b-x9cg1vu8bf] {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.75rem;
    justify-content: center;
}

.date-info[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    width: 100%;
}

.date-primary[b-x9cg1vu8bf] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.date-secondary[b-x9cg1vu8bf] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
}

.balance-cell[b-x9cg1vu8bf] {
    justify-content: flex-end;
    align-items: center;
}

.balance-amount[b-x9cg1vu8bf] {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 0.875rem;
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .balance-log-modal[b-x9cg1vu8bf] {
        max-width: 95vw;
        width: 95vw;
    }
    
    .balance-transactions-table[b-x9cg1vu8bf] {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }
    
    .table-header[b-x9cg1vu8bf] {
        display: none; /* Hide header on mobile */
    }
    
    .table-body[b-x9cg1vu8bf] {
        max-height: none;
        gap: 1rem;
        padding: 1rem;
        background: var(--bg-primary);
    }
    
    .transaction-row[b-x9cg1vu8bf] {
        display: block;
        grid-template-columns: none;
        border-radius: 12px;
        border: 1px solid var(--border-color);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        background: var(--card-background);
        margin-bottom: 0;
    }
    
    .cell[b-x9cg1vu8bf] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
        padding: 0.75rem 1rem;
        min-height: 44px;
    }
    
    .cell:last-child[b-x9cg1vu8bf] {
        border-bottom: none;
    }
    
    .cell[b-x9cg1vu8bf]::before {
        content: attr(data-label) ":";
        font-weight: 600;
        color: var(--text-secondary);
        font-size: 0.875rem;
        flex-shrink: 0;
        margin-right: 0.5rem;
    }
    
    .type-cell[b-x9cg1vu8bf] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .type-cell .operation-badge[b-x9cg1vu8bf] {
        margin-left: auto;
    }
    
    .amount-cell[b-x9cg1vu8bf],
    .balance-cell[b-x9cg1vu8bf] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .source-cell[b-x9cg1vu8bf] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .source-cell .source-info[b-x9cg1vu8bf] {
        align-items: flex-end;
        text-align: right;
    }
    
    .date-cell[b-x9cg1vu8bf] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    
    .date-cell .date-info[b-x9cg1vu8bf] {
        align-items: flex-end;
        text-align: right;
    }
}

/* ===== TRANSFER BALANCE MODAL ===== */
.transfer-balance-modal[b-x9cg1vu8bf] {
    max-width: 500px;
}

.current-balance-card[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1rem;
    color: white;
}

.balance-display[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.balance-icon[b-x9cg1vu8bf] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.balance-info[b-x9cg1vu8bf] {
    flex: 1;
}

.balance-label[b-x9cg1vu8bf] {
    display: block;
    font-size: 0.875rem;
    opacity: 0.9;
    margin-bottom: 0.25rem;
}

.balance-amount[b-x9cg1vu8bf] {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
}

.transfer-form[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

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

.form-label[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
}

.form-input[b-x9cg1vu8bf] {
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.form-input:focus[b-x9cg1vu8bf] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.amount-input-wrapper[b-x9cg1vu8bf] {
    position: relative;
}

.currency-symbol[b-x9cg1vu8bf] {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-weight: 500;
    z-index: 1;
}

.amount-input[b-x9cg1vu8bf] {
    padding-left: 2rem;
}

.security-notice[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--warning-color-rgb), 0.1);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
    border-radius: 8px;
    margin-top: 0.25rem;
}

.notice-icon[b-x9cg1vu8bf] {
    color: var(--warning-color);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.notice-content h4[b-x9cg1vu8bf] {
    margin: 0 0 0.25rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
}

.notice-content p[b-x9cg1vu8bf] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===== TRANSFER CONFIRMATION MODAL ===== */
.transfer-confirm-modal[b-x9cg1vu8bf] {
    max-width: 550px;
}

.transfer-confirmation-details[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.confirmation-section[b-x9cg1vu8bf] {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
}

.section-title[b-x9cg1vu8bf] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-row[b-x9cg1vu8bf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-light);
}

.detail-row:last-child[b-x9cg1vu8bf] {
    border-bottom: none;
}

.detail-row.remaining-balance[b-x9cg1vu8bf] {
    background: rgba(var(--success-color-rgb), 0.05);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    border-bottom: none;
}

.detail-label[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.detail-value[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 600;
}

.detail-value.amount[b-x9cg1vu8bf] {
    color: var(--primary-color);
    font-size: 1rem;
    font-weight: 700;
}

.warning-section[b-x9cg1vu8bf] {
    margin-top: 0.5rem;
}

.warning-card[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(var(--danger-color-rgb), 0.05);
    border: 1px solid rgba(var(--danger-color-rgb), 0.2);
    border-radius: 12px;
}

.warning-icon[b-x9cg1vu8bf] {
    color: var(--danger-color);
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.warning-content h4[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--danger-color);
}

.warning-list[b-x9cg1vu8bf] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.warning-list li[b-x9cg1vu8bf] {
    position: relative;
    padding-left: 1rem;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.warning-list li[b-x9cg1vu8bf]::before {
    content: "⚠";
    position: absolute;
    left: 0;
    color: var(--warning-color);
    font-size: 0.75rem;
}

.warning-list li:last-child[b-x9cg1vu8bf] {
    margin-bottom: 0;
}

/* Transfer confirm modal buttons */
.transfer-confirm-modal .modal-footer .btn-danger[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--danger-color) 0%, #dc2626 100%);
    border: 1px solid var(--danger-color);
    color: white;
    font-weight: 600;
    transition: all 0.2s ease;
}

.transfer-confirm-modal .modal-footer .btn-danger:hover:not(:disabled)[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

.transfer-confirm-modal .modal-footer .btn-danger:disabled[b-x9cg1vu8bf] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Transfer confirmation modal alert styling */
.transfer-confirm-modal .alert[b-x9cg1vu8bf] {
    margin: 1rem 0;
    font-weight: 500;
}

.transfer-confirm-modal .alert-error[b-x9cg1vu8bf] {
    background: rgba(var(--danger-color-rgb), 0.08);
    border: 1px solid rgba(var(--danger-color-rgb), 0.25);
    color: var(--danger-color);
}

.transfer-confirm-modal .alert-success[b-x9cg1vu8bf] {
    background: rgba(var(--success-color-rgb), 0.08);
    border: 1px solid rgba(var(--success-color-rgb), 0.25);
    color: var(--success-color);
}

/* ===== PAYMENT MODAL ===== */
.payment-modal[b-x9cg1vu8bf] {
    max-width: 600px;
}

.payment-container[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.plan-summary-card[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-color) 100%);
    border-radius: 12px;
    padding: 1rem;
    color: white;
}

.plan-header[b-x9cg1vu8bf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.plan-name[b-x9cg1vu8bf] {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.plan-price[b-x9cg1vu8bf] {
    text-align: right;
}

.price-amount[b-x9cg1vu8bf] {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
}

.price-period[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    opacity: 0.9;
}

.plan-features[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.feature-item[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.feature-item i[b-x9cg1vu8bf] {
    width: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.feature-item.more-features[b-x9cg1vu8bf] {
    opacity: 0.8;
}

.coupon-section[b-x9cg1vu8bf] {
    background: rgba(var(--bg-tertiary-rgb), 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
}

.section-header[b-x9cg1vu8bf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.section-header h4[b-x9cg1vu8bf] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.optional-badge[b-x9cg1vu8bf] {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: rgba(var(--text-secondary-rgb), 0.1);
    color: var(--text-secondary);
    border-radius: 4px;
}

.coupon-input-group[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.5rem;
}

.coupon-input-group .form-input[b-x9cg1vu8bf] {
    flex: 1;
}

.coupon-btn[b-x9cg1vu8bf] {
    white-space: nowrap;
}

.order-summary-card[b-x9cg1vu8bf] {
    background: rgba(var(--bg-tertiary-rgb), 0.3);
    border-radius: 12px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
}

.summary-title[b-x9cg1vu8bf] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.summary-line[b-x9cg1vu8bf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}

.summary-line.discount .line-value[b-x9cg1vu8bf] {
    color: var(--success-color);
}

.summary-line.total[b-x9cg1vu8bf] {
    border-top: 1px solid var(--border-color);
    padding-top: 0.5rem;
    margin-top: 0.375rem;
    font-weight: 600;
}

.total-amount[b-x9cg1vu8bf] {
    font-size: 1.125rem;
    color: var(--primary-color);
}

.summary-divider[b-x9cg1vu8bf] {
    height: 1px;
    background: var(--border-color);
    margin: 0.5rem 0;
}

.payment-actions[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.btn-large[b-x9cg1vu8bf] {
    padding: 1rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
}

.payment-methods[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.methods-title[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-method-card[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(var(--bg-tertiary-rgb), 0.3);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-method-card:hover[b-x9cg1vu8bf] {
    background: rgba(var(--bg-tertiary-rgb), 0.5);
    border-color: rgba(var(--primary-color-rgb), 0.3);
}

.method-icon[b-x9cg1vu8bf] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #1677ff 0%, #69c0ff 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
}

.method-content[b-x9cg1vu8bf] {
    flex: 1;
}

.method-name[b-x9cg1vu8bf] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.method-description[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.method-spinner[b-x9cg1vu8bf] {
    color: var(--primary-color);
}

.payment-completion[b-x9cg1vu8bf] {
    padding: 0.75rem;
    background: rgba(var(--success-color-rgb), 0.1);
    border-radius: 12px;
    border: 1px solid rgba(var(--success-color-rgb), 0.2);
}

/* ===== REFERRAL MODAL - Commercial & Theme-Friendly ===== */
.referral-modal[b-x9cg1vu8bf] {
    max-width: 600px;
    min-height: 500px;
}

.referral-container[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.referral-hero[b-x9cg1vu8bf] {
    text-align: center;
    padding: 2rem 1rem 1rem 1rem;
    background: linear-gradient(135deg, 
        rgba(var(--primary-color-rgb), 0.1) 0%, 
        rgba(var(--success-color-rgb), 0.05) 50%,
        rgba(var(--warning-color-rgb), 0.05) 100%);
    border-radius: 16px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .referral-hero[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, 
        rgba(var(--primary-color-rgb), 0.15) 0%, 
        rgba(var(--success-color-rgb), 0.1) 50%,
        rgba(var(--warning-color-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--primary-color-rgb), 0.2);
}

.referral-hero[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, 
        rgba(var(--primary-color-rgb), 0.05) 0%, 
        transparent 70%);
    animation: shimmer-b-x9cg1vu8bf 3s ease-in-out infinite;
}

@keyframes shimmer-b-x9cg1vu8bf {
    0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.3; }
    50% { transform: rotate(180deg) scale(1.1); opacity: 0.1; }
}

.hero-icon[b-x9cg1vu8bf] {
    width: 80px;
    height: 80px;
    border-radius: 20px;
    background: linear-gradient(135deg, 
        var(--primary-color) 0%, 
        var(--success-color) 50%,
        var(--warning-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
    margin: 0 auto 1rem auto;
    box-shadow: 
        0 10px 30px rgba(var(--primary-color-rgb), 0.4),
        0 0 0 4px rgba(255, 255, 255, 0.1);
    position: relative;
    z-index: 2;
    animation: pulse-b-x9cg1vu8bf 2s ease-in-out infinite;
}

/* Ensure hero icon is always visible in both themes */
[data-theme="light"] .hero-icon[b-x9cg1vu8bf] {
    color: white;
    box-shadow: 
        0 10px 30px rgba(var(--primary-color-rgb), 0.3),
        0 0 0 4px rgba(0, 0, 0, 0.05);
}

[data-theme="dark"] .hero-icon[b-x9cg1vu8bf] {
    color: white;
    box-shadow: 
        0 10px 30px rgba(var(--primary-color-rgb), 0.4),
        0 0 0 4px rgba(255, 255, 255, 0.1);
}

@keyframes pulse-b-x9cg1vu8bf {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.hero-title[b-x9cg1vu8bf] {
    font-size: 1.5rem;
    font-weight: 700;
    background: linear-gradient(135deg, 
        var(--primary-color) 0%, 
        var(--success-color) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 0.75rem 0;
    position: relative;
    z-index: 2;
}

.hero-description[b-x9cg1vu8bf] {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

.referral-code-section[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.5rem;
    background: var(--card-bg);
    border-radius: 16px;
    border: 2px solid rgba(var(--primary-color-rgb), 0.1);
    box-shadow: 0 4px 20px rgba(var(--primary-color-rgb), 0.1);
}

[data-theme="dark"] .referral-code-section[b-x9cg1vu8bf] {
    background: var(--bg-tertiary);
    border: 2px solid rgba(var(--primary-color-rgb), 0.2);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.referral-label[b-x9cg1vu8bf] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 0.5rem;
}

.referral-code-display[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.referral-input[b-x9cg1vu8bf] {
    flex: 1;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-weight: 700;
    font-size: 1.1rem;
    text-align: center;
    letter-spacing: 1px;
    padding: 1rem;
    border: 2px solid rgba(var(--primary-color-rgb), 0.2);
    border-radius: 12px;
    background: linear-gradient(135deg, 
        rgba(var(--primary-color-rgb), 0.05) 0%, 
        transparent 100%);
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.referral-input:focus[b-x9cg1vu8bf] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1);
    transform: scale(1.02);
}

.copy-button[b-x9cg1vu8bf] {
    white-space: nowrap;
    padding: 1rem 1.5rem;
    font-weight: 600;
    background: linear-gradient(135deg, 
        var(--primary-color) 0%, 
        var(--primary-color-hover) 100%);
    border: none;
    border-radius: 12px;
    color: white;
    box-shadow: 0 4px 15px rgba(var(--primary-color-rgb), 0.3);
    transition: all 0.3s ease;
}

.copy-button:hover[b-x9cg1vu8bf] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-color-rgb), 0.4);
}

.referral-benefits[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, 
        rgba(var(--success-color-rgb), 0.05) 0%, 
        rgba(var(--primary-color-rgb), 0.02) 100%);
    border-radius: 16px;
    padding: 1.5rem;
    border: 1px solid rgba(var(--success-color-rgb), 0.1);
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .referral-benefits[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, 
        rgba(var(--success-color-rgb), 0.1) 0%, 
        rgba(var(--primary-color-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--success-color-rgb), 0.2);
}

.referral-benefits[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        var(--primary-color) 0%, 
        var(--success-color) 50%,
        var(--warning-color) 100%);
}

.benefits-title[b-x9cg1vu8bf] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
}

.benefit-list[b-x9cg1vu8bf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

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

.benefit-item[b-x9cg1vu8bf] {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

[data-theme="dark"] .benefit-item[b-x9cg1vu8bf] {
    background: var(--bg-secondary);
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
}

.benefit-item:hover[b-x9cg1vu8bf] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.15);
    border-color: rgba(var(--primary-color-rgb), 0.3);
}

.benefit-item[b-x9cg1vu8bf]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--success-color));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.benefit-item:hover[b-x9cg1vu8bf]::before {
    transform: scaleX(1);
}

.benefit-icon[b-x9cg1vu8bf] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, 
        var(--primary-color) 0%, 
        var(--success-color) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

/* Ensure benefit icons are always visible in both themes */
[data-theme="light"] .benefit-icon[b-x9cg1vu8bf] {
    color: white;
}

[data-theme="dark"] .benefit-icon[b-x9cg1vu8bf] {
    color: white;
}

.benefit-item:nth-child(2) .benefit-icon[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--success-color) 0%, var(--warning-color) 100%);
}

.benefit-item:nth-child(3) .benefit-icon[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--info-color) 100%);
}

.benefit-item:nth-child(4) .benefit-icon[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, var(--info-color) 0%, var(--primary-color) 100%);
}

.benefit-content[b-x9cg1vu8bf] {
    flex: 1;
}

.benefit-content h5[b-x9cg1vu8bf] {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.benefit-content p[b-x9cg1vu8bf] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Enhanced Commercial Elements */
.earning-highlight[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, 
        rgba(var(--success-color-rgb), 0.1) 0%, 
        rgba(var(--warning-color-rgb), 0.1) 100%);
    border-radius: 12px;
    border: 1px solid rgba(var(--success-color-rgb), 0.2);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--success-color);
    animation: glow-b-x9cg1vu8bf 2s ease-in-out infinite alternate;
}

@keyframes glow-b-x9cg1vu8bf {
    from { box-shadow: 0 2px 10px rgba(var(--success-color-rgb), 0.2); }
    to { box-shadow: 0 4px 20px rgba(var(--success-color-rgb), 0.4); }
}

.share-buttons[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.btn-social[b-x9cg1vu8bf] {
    flex: 1;
    min-width: 80px;
    font-size: 0.75rem;
    padding: 0.5rem 0.75rem;
}

.btn-whatsapp[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: white;
    border: none;
}

.btn-whatsapp:hover[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #128C7E, #075E54);
    transform: translateY(-1px);
}

.btn-telegram[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #0088CC, #0066AA);
    color: white;
    border: none;
}

.btn-telegram:hover[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #0066AA, #004488);
    transform: translateY(-1px);
}

.btn-email[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #EA4335, #D33B2C);
    color: white;
    border: none;
}

.btn-email:hover[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #D33B2C, #B52D20);
    transform: translateY(-1px);
}

.referral-stats[b-x9cg1vu8bf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
}

.stats-card[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--card-bg);
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-color-rgb), 0.1);
    transition: all 0.3s ease;
}

[data-theme="dark"] .stats-card[b-x9cg1vu8bf] {
    background: var(--bg-tertiary);
    border: 1px solid rgba(var(--primary-color-rgb), 0.15);
}

.stats-card:hover[b-x9cg1vu8bf] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(var(--primary-color-rgb), 0.15);
    border-color: rgba(var(--primary-color-rgb), 0.3);
}

.stats-icon[b-x9cg1vu8bf] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--success-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    flex-shrink: 0;
}

.stats-content[b-x9cg1vu8bf] {
    flex: 1;
}

.stats-content h6[b-x9cg1vu8bf] {
    margin: 0 0 0.25rem 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stats-number[b-x9cg1vu8bf] {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
}

/* Responsive adjustments for enhanced modal */
@media (max-width: 640px) {
    .referral-modal[b-x9cg1vu8bf] {
        max-width: 95vw;
        min-height: auto;
    }
    
    .share-buttons[b-x9cg1vu8bf] {
        flex-direction: column;
    }
    
    .btn-social[b-x9cg1vu8bf] {
        flex: none;
        width: 100%;
    }
    
    .referral-stats[b-x9cg1vu8bf] {
        grid-template-columns: 1fr;
    }
    
    .hero-title[b-x9cg1vu8bf] {
        font-size: 1.25rem;
    }
    
    .earning-highlight[b-x9cg1vu8bf] {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== ACTIVATION MODAL ===== */
.activation-modal[b-x9cg1vu8bf] {
    max-width: 500px;
}

.activation-container[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.activation-success[b-x9cg1vu8bf] {
    text-align: center;
    padding: 0.75rem;
}

.success-icon[b-x9cg1vu8bf] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--success-color) 0%, #52c41a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    margin: 0 auto 0.75rem auto;
    box-shadow: 0 8px 25px rgba(var(--success-color-rgb), 0.3);
}

.success-title[b-x9cg1vu8bf] {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.plan-description[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

.activation-warnings[b-x9cg1vu8bf] {
    background: rgba(var(--warning-color-rgb), 0.1);
    border-radius: 12px;
    padding: 0.75rem;
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
}

.warnings-title[b-x9cg1vu8bf] {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.warning-list[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.warning-item[b-x9cg1vu8bf] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.warning-icon[b-x9cg1vu8bf] {
    color: var(--warning-color);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.warning-item span[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

/* ===== PROMOTION MODALS ===== */
.promotion-modal[b-x9cg1vu8bf] {
    max-width: 800px;
    width: 90vw;
    max-height: 95vh;
}

.promotion-body[b-x9cg1vu8bf] {
    padding: 0;
    max-height: calc(95vh - 120px);
    overflow-y: auto;
}

.aliyun-modal .modal-icon[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
}

.cloud115-modal .modal-icon[b-x9cg1vu8bf] {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

/* ===== SHARED COMPONENTS ===== */
.alert[b-x9cg1vu8bf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

.alert-success[b-x9cg1vu8bf] {
    background: rgba(var(--success-color-rgb), 0.1);
    border: 1px solid rgba(var(--success-color-rgb), 0.2);
    color: var(--success-color);
}

.alert-error[b-x9cg1vu8bf] {
    background: rgba(var(--warning-color-rgb), 0.1);
    border: 1px solid rgba(var(--warning-color-rgb), 0.2);
    color: var(--warning-color);
}

.loading-state[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.loading-spinner[b-x9cg1vu8bf] {
    margin-bottom: 1rem;
}

.loading-text[b-x9cg1vu8bf] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.empty-state[b-x9cg1vu8bf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
}

.empty-icon[b-x9cg1vu8bf] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: rgba(var(--text-secondary-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.empty-title[b-x9cg1vu8bf] {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.5rem 0;
}

.empty-description[b-x9cg1vu8bf] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* Button Variants */
.btn-secondary[b-x9cg1vu8bf] {
    background: rgba(var(--text-secondary-rgb), 0.1);
    border: 1px solid rgba(var(--text-secondary-rgb), 0.2);
    color: var(--text-secondary);
}

.btn-secondary:hover[b-x9cg1vu8bf] {
    background: rgba(var(--text-secondary-rgb), 0.2);
    color: var(--text-primary);
}

.btn-success[b-x9cg1vu8bf] {
    background: var(--success-color);
    border: 1px solid var(--success-color);
    color: white;
}

.btn-success:hover[b-x9cg1vu8bf] {
    background: #52c41a;
    border-color: #52c41a;
}

.btn-outline[b-x9cg1vu8bf] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover[b-x9cg1vu8bf] {
    background: rgba(var(--primary-color-rgb), 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .professional-modal[b-x9cg1vu8bf] {
        width: 95vw;
        max-width: none;
        max-height: 95vh;
        margin: 0.5rem;
    }
    
    .professional-modal .modal-header[b-x9cg1vu8bf] {
        padding: 1rem;
    }
    
    .professional-modal .modal-body[b-x9cg1vu8bf] {
        padding: 1rem;
        max-height: calc(95vh - 160px);
    }
    
    .professional-modal .modal-footer[b-x9cg1vu8bf] {
        padding: 0.75rem 1rem;
        flex-direction: column;
    }
    
    .balance-log-modal[b-x9cg1vu8bf],
    .transfer-balance-modal[b-x9cg1vu8bf],
    .payment-modal[b-x9cg1vu8bf],
    .referral-modal[b-x9cg1vu8bf],
    .activation-modal[b-x9cg1vu8bf] {
        max-width: none;
    }
    
    .transaction-item[b-x9cg1vu8bf] {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .transaction-header[b-x9cg1vu8bf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
    
    .plan-header[b-x9cg1vu8bf] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .referral-code-display[b-x9cg1vu8bf] {
        flex-direction: column;
    }
    
    .coupon-input-group[b-x9cg1vu8bf] {
        flex-direction: column;
    }
    
    .modal-close-btn[b-x9cg1vu8bf] {
        top: 0.75rem;
        right: 0.75rem;
    }
}

/* Promotion Banners Spacing */
.promotion-banners[b-x9cg1vu8bf] {
    margin-top: 2rem;
}
/* /Pages/Mounts.razor.rz.scp.css */
/* Mounts Page Styles - Logo-Inspired Design */
.content-header[b-n9vag6ek9r] {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #7c3aed 0%, #3b82f6 50%, #06b6d4 100%);
    border-radius: 16px;
    padding: 2rem;
    color: white;
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.3);
    position: relative;
    overflow: hidden;
}

.header-content[b-n9vag6ek9r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

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

.header-actions .btn[b-n9vag6ek9r] {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
}

.header-actions .btn:hover[b-n9vag6ek9r] {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.header-actions .btn:disabled[b-n9vag6ek9r] {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.header-actions .btn i[b-n9vag6ek9r] {
    margin-right: 0.5rem;
}

.content-header h1[b-n9vag6ek9r] {
    font-size: 2.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 1;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.8));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.content-description[b-n9vag6ek9r] {
    color: rgba(255, 255, 255, 0.95);
    margin: 0;
    font-size: 1.125rem;
    font-weight: 400;
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.mounts-container[b-n9vag6ek9r] {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Summary Stats - Theme-Aware Design */
.mounts-summary[b-n9vag6ek9r] {
    background: var(--card-background);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}

.mounts-summary[b-n9vag6ek9r]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #7c3aed, #3b82f6, #06b6d4, #0891b2, #0c4a6e, #7c3aed);
}

.summary-stats[b-n9vag6ek9r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1.5rem;
}

.stat-item[b-n9vag6ek9r] {
    text-align: center;
    position: relative;
    padding: 0.75rem;
    border-radius: 12px;
    background: var(--bg-secondary);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.stat-item:hover[b-n9vag6ek9r] {
    transform: translateY(-4px);
    background: var(--bg-tertiary);
    box-shadow: var(--shadow);
}

.stat-number[b-n9vag6ek9r] {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(135deg, #7c3aed, #3b82f6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 0.5rem;
    text-shadow: 0 4px 8px rgba(124, 58, 237, 0.3);
    position: relative;
}

.stat-number[b-n9vag6ek9r]::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 3px;
    background: linear-gradient(90deg, #7c3aed, #3b82f6);
    border-radius: 2px;
}

.stat-label[b-n9vag6ek9r] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

/* Mounts Grid - Compact Optimized Layout */
.mounts-grid[b-n9vag6ek9r] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 16px;
    margin-top: 20px;
    padding: 0;
}

@media (max-width: 768px) {
    .mounts-grid[b-n9vag6ek9r] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 16px;
    }
}

@media (min-width: 1200px) {
    .mounts-grid[b-n9vag6ek9r] {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 20px;
    }
}

/* Mount Card - Compact Information-Dense Design */
.mount-card[b-n9vag6ek9r] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    overflow: visible;
    display: flex;
    flex-direction: column;
    max-width: 400px;
}

.mount-card:hover[b-n9vag6ek9r] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.mount-header[b-n9vag6ek9r] {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    gap: 16px;
    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);
    position: relative;
    min-height: 80px;
    border-radius: 12px 12px 0 0;
    flex-shrink: 0;
}

.mount-icon[b-n9vag6ek9r] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(59, 130, 246, 0.25);
}

.mount-info[b-n9vag6ek9r] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mount-name[b-n9vag6ek9r] {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.mount-path[b-n9vag6ek9r] {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: var(--bg-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    max-width: 100%;
}

.mount-badges[b-n9vag6ek9r] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
    overflow: hidden;
}

.status-badge[b-n9vag6ek9r] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.status-badge.active[b-n9vag6ek9r] {
    background: var(--success-background);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.status-badge.inactive[b-n9vag6ek9r] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.type-badge[b-n9vag6ek9r] {
    padding: 2px 8px;
    background: var(--info-bg);
    color: var(--info-text);
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid var(--border-color);
    flex-shrink: 0;
}

.mount-actions[b-n9vag6ek9r] {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.actions-row[b-n9vag6ek9r] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 8px;
}

.action-btn[b-n9vag6ek9r] {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.action-btn:hover:not(:disabled)[b-n9vag6ek9r] {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.action-btn:disabled[b-n9vag6ek9r] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    background: var(--bg-secondary) !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

.mount-btn[b-n9vag6ek9r] {
    background: var(--success-color);
    color: white;
}

.mount-btn:hover:not(:disabled)[b-n9vag6ek9r] {
    background: var(--success-color-hover);
}

.unmount-btn[b-n9vag6ek9r] {
    background: var(--warning-color);
    color: white;
}

.unmount-btn:hover:not(:disabled)[b-n9vag6ek9r] {
    background: var(--warning-color-hover);
}

.edit-btn[b-n9vag6ek9r] {
    background: var(--gray-600);
    color: white;
}

.edit-btn:hover:not(:disabled)[b-n9vag6ek9r] {
    background: var(--gray-700);
}

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

.delete-btn:hover:not(:disabled)[b-n9vag6ek9r] {
    background: var(--danger-color-hover);
}

.mount-details[b-n9vag6ek9r] {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    border-radius: 0 0 12px 12px;
    flex: 1;
}

.detail-row[b-n9vag6ek9r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
    gap: 16px;
    min-height: 32px;
}

.detail-row:last-child[b-n9vag6ek9r] {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-row.error-row[b-n9vag6ek9r] {
    background: var(--error-background);
    border: 1px solid var(--error-border);
    border-radius: 8px;
    padding: 12px;
    margin: 12px 0;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    min-height: auto;
}

.detail-row.error-row .detail-label[b-n9vag6ek9r] {
    color: var(--error-text);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    min-width: auto;
}

.detail-row.error-row .detail-label[b-n9vag6ek9r]::before {
    content: "\f071";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--error-text);
    font-size: 12px;
}

.detail-label[b-n9vag6ek9r] {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
    min-width: 100px;
    flex-shrink: 0;
}

.detail-value[b-n9vag6ek9r] {
    font-size: 12px;
    color: var(--text-primary);
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    background: var(--card-background);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid var(--border-color);
    flex: 1;
    min-width: 0;
    word-break: break-all;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-value.error[b-n9vag6ek9r] {
    color: var(--error-text);
    background: var(--error-background);
    border-color: var(--error-border);
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.4;
    padding: 8px;
    white-space: normal;
    word-break: break-word;
}

.property-tags[b-n9vag6ek9r] {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
}

.property-tag[b-n9vag6ek9r] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border-radius: 8px;
    font-size: 9px;
    font-weight: 600;
    border: 1px solid var(--border-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.property-tag.read-only[b-n9vag6ek9r] {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--border-color);
}

.property-tag.auto-mount[b-n9vag6ek9r] {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--border-color);
}

.property-tag i[b-n9vag6ek9r] {
    font-size: 8px;
}

/* Tooltip Styling */
.tooltip[b-n9vag6ek9r] {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext[b-n9vag6ek9r] {
    visibility: hidden;
    background-color: var(--dark-color);
    color: var(--light-color);
    text-align: center;
    border-radius: 6px;
    padding: 8px 12px;
    position: absolute;
    z-index: 1000;
    bottom: 125%;
    left: 50%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-color);
}

.tooltip .tooltiptext[b-n9vag6ek9r]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--dark-color) transparent transparent transparent;
}

.tooltip:hover .tooltiptext[b-n9vag6ek9r] {
    visibility: visible;
    opacity: 1;
}

/* Remove hardcoded dark mode - now using CSS variables that adapt to theme */

/* Modern Button Styles */
.btn[b-n9vag6ek9r] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1.2rem;
    border: none;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-sm[b-n9vag6ek9r] {
    padding: 0.375rem;
    font-size: 0.75rem;
    border-radius: 8px;
    min-width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-outline[b-n9vag6ek9r] {
    background: transparent;
    border: 2px solid rgba(124, 58, 237, 0.3);
    color: #7c3aed;
    backdrop-filter: blur(10px);
}

.btn-outline:hover[b-n9vag6ek9r] {
    background: rgba(124, 58, 237, 0.1);
    border-color: #7c3aed;
    color: #6d28d9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(124, 58, 237, 0.3);
}

.btn-primary[b-n9vag6ek9r] {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-primary:hover[b-n9vag6ek9r] {
    background: linear-gradient(135deg, #5a67d8, #6b46c1);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5);
}

.btn-warning[b-n9vag6ek9r] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.4);
}

.btn-warning:hover[b-n9vag6ek9r] {
    background: linear-gradient(135deg, #d97706, #b45309);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
}

.btn-danger[b-n9vag6ek9r] {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.btn-danger:hover[b-n9vag6ek9r] {
    background: linear-gradient(135deg, #dc2626, #b91c1c);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(239, 68, 68, 0.5);
}

/* Loading State - Theme-Aware Design */
.loading-container[b-n9vag6ek9r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.loading-spinner[b-n9vag6ek9r] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-n9vag6ek9r 1s linear infinite;
    margin-bottom: 1.5rem;
    position: relative;
}

.loading-spinner[b-n9vag6ek9r]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 2px solid transparent;
    border-top: 2px solid #764ba2;
    border-radius: 50%;
    animation: spin-b-n9vag6ek9r 1.5s linear infinite reverse;
}

.loading-container p[b-n9vag6ek9r] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Empty State - Theme-Aware Design */
.empty-state[b-n9vag6ek9r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.empty-icon[b-n9vag6ek9r] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
}

.empty-icon i[b-n9vag6ek9r] {
    font-size: 2rem;
    color: var(--text-secondary);
    position: relative;
    z-index: 1;
}

.empty-state h3[b-n9vag6ek9r] {
    font-size: 1.25rem;
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.empty-state p[b-n9vag6ek9r] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
    max-width: 400px;
}

/* Responsive Design - Clean and Organized */
@media (max-width: 768px) {
    .content-header[b-n9vag6ek9r] {
        padding: 1.5rem;
    }
    
    .header-content[b-n9vag6ek9r] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .header-actions[b-n9vag6ek9r] {
        width: 100%;
        justify-content: flex-end;
        gap: 0.5rem;
    }
    
    .header-actions .btn[b-n9vag6ek9r] {
        padding: 0.75rem;
        min-width: 44px;
        justify-content: center;
    }
    
    .header-actions .btn span[b-n9vag6ek9r] {
        display: none; /* Hide text on mobile */
    }
    
    .header-actions .btn i[b-n9vag6ek9r] {
        margin-right: 0;
        font-size: 1rem;
    }
    
    .content-header h1[b-n9vag6ek9r] {
        font-size: 2rem;
    }
    
    .mounts-grid[b-n9vag6ek9r] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .mount-card[b-n9vag6ek9r] {
        margin-bottom: 16px;
    }
    
    .mount-header[b-n9vag6ek9r] {
        padding: 16px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .mount-icon[b-n9vag6ek9r] {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    
    .mount-name[b-n9vag6ek9r] {
        font-size: 16px;
    }
    
    .mount-path[b-n9vag6ek9r] {
        font-size: 13px;
    }
    
    .mount-actions[b-n9vag6ek9r] {
        width: 100%;
        justify-content: flex-end;
        margin-left: 0;
    }
    
    .action-btn[b-n9vag6ek9r] {
        width: 32px;
        height: 32px;
        font-size: 12px;
    }
    
    .mount-details[b-n9vag6ek9r] {
        padding: 16px;
    }
    
    .detail-row[b-n9vag6ek9r] {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 0;
    }
    
    .detail-label[b-n9vag6ek9r] {
        min-width: unset;
        font-size: 13px;
    }
    
    .detail-value[b-n9vag6ek9r] {
        font-size: 13px;
        text-align: left;
        max-width: 100%;
    }
    
    .property-tags[b-n9vag6ek9r] {
        justify-content: flex-start;
    }
    
    .status-badge[b-n9vag6ek9r] {
        font-size: 11px;
        padding: 3px 6px;
    }
    
    .type-badge[b-n9vag6ek9r] {
        font-size: 11px;
        padding: 3px 6px;
    }
    
    .summary-stats[b-n9vag6ek9r] {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 1rem;
    }
}

@media (max-width: 480px) {
    .content-header[b-n9vag6ek9r] {
        padding: 1.5rem;
    }
    
    .content-header h1[b-n9vag6ek9r] {
        font-size: 2rem;
    }
    
    .mount-header[b-n9vag6ek9r] {
        padding: 12px;
        gap: 8px;
    }
    
    .mount-icon[b-n9vag6ek9r] {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    .mount-name[b-n9vag6ek9r] {
        font-size: 15px;
    }
    
    .mount-path[b-n9vag6ek9r] {
        font-size: 12px;
    }
    
    .mount-actions[b-n9vag6ek9r] {
        gap: 6px;
    }
    
    .action-btn[b-n9vag6ek9r] {
        width: 28px;
        height: 28px;
        font-size: 11px;
    }
    
    .mount-details[b-n9vag6ek9r] {
        padding: 12px;
    }
    
    .detail-row[b-n9vag6ek9r] {
        padding: 6px 0;
    }
    
    .detail-label[b-n9vag6ek9r] {
        font-size: 12px;
    }
    
    .detail-value[b-n9vag6ek9r] {
        font-size: 12px;
    }
    
    .status-badge[b-n9vag6ek9r] {
        font-size: 10px;
        padding: 2px 4px;
    }
    
    .type-badge[b-n9vag6ek9r] {
        font-size: 10px;
        padding: 2px 4px;
    }
    
    .property-tag[b-n9vag6ek9r] {
        font-size: 10px;
        padding: 2px 4px;
    }
    
    .btn[b-n9vag6ek9r] {
        justify-content: center;
    }
    
    .mounts-grid[b-n9vag6ek9r] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* High-res display optimizations */
@media (min-width: 1400px) {
    .mounts-grid[b-n9vag6ek9r] {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 1800px) {
    .mounts-grid[b-n9vag6ek9r] {
        grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
        gap: 1.75rem;
    }
}

/* Animation Keyframes */
@keyframes fadeIn-b-n9vag6ek9r {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes spin-b-n9vag6ek9r {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Pages/Performance.razor.rz.scp.css */
/* Performance Page - Compact Modern Design */
.performance-page[b-79q2u3h87f] {
    padding: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
}

/* Compact Header */
.page-header-compact[b-79q2u3h87f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.header-content[b-79q2u3h87f] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-content h1[b-79q2u3h87f] {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--text-color);
}

.performance-controls[b-79q2u3h87f] {
    display: flex;
    gap: 0.5rem;
}

.performance-controls .btn[b-79q2u3h87f] {
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.performance-controls .btn:hover[b-79q2u3h87f] {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.monitoring-status[b-79q2u3h87f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    background-color: var(--card-background);
    border: 1px solid var(--border-color);
    color: var(--text-muted);
}

.monitoring-status.active[b-79q2u3h87f] {
    background-color: rgba(40, 167, 69, 0.1);
    border-color: var(--success-color);
    color: var(--success-color);
}

.monitoring-status.paused[b-79q2u3h87f] {
    background-color: rgba(255, 193, 7, 0.1);
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.monitoring-status i[b-79q2u3h87f] {
    font-size: 0.75rem;
}

.monitoring-status.active i[b-79q2u3h87f] {
    animation: pulse-b-79q2u3h87f 2s infinite;
}

@keyframes pulse-b-79q2u3h87f {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Compact Stats Cards */
.performance-stats-compact[b-79q2u3h87f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.stat-card-compact[b-79q2u3h87f] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-card-compact:hover[b-79q2u3h87f] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--primary-color);
}

.stat-card-main[b-79q2u3h87f] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.stat-card-compact .stat-icon[b-79q2u3h87f] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.stat-card-compact.cpu .stat-icon[b-79q2u3h87f] {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
}

.stat-card-compact.memory .stat-icon[b-79q2u3h87f] {
    background: rgba(156, 39, 176, 0.1);
    color: #9c27b0;
}

.stat-card-compact.download .stat-icon[b-79q2u3h87f] {
    background: rgba(33, 150, 243, 0.1);
    color: #2196f3;
}

.stat-card-compact.upload .stat-icon[b-79q2u3h87f] {
    background: rgba(76, 175, 80, 0.1);
    color: #4caf50;
}

.stat-content[b-79q2u3h87f] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.stat-content .stat-title[b-79q2u3h87f] {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.stat-content .stat-value[b-79q2u3h87f] {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
}

.stat-content .stat-subtitle[b-79q2u3h87f] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
    margin-top: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

/* Memory details with smaller font size */
.memory-details[b-79q2u3h87f] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--text-muted);
}

.stat-progress-compact[b-79q2u3h87f] {
    width: 100%;
    height: 4px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.stat-progress-compact .progress-bar[b-79q2u3h87f] {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease;
}

.stat-card-compact.cpu .progress-bar[b-79q2u3h87f] {
    background: linear-gradient(90deg, #ff6b6b, #ff8a80);
}

.stat-card-compact.memory .progress-bar[b-79q2u3h87f] {
    background: linear-gradient(90deg, #9c27b0, #ba68c8);
}

.stat-card-compact.download .progress-bar[b-79q2u3h87f] {
    background: linear-gradient(90deg, #2196f3, #64b5f6);
}

.stat-card-compact.upload .progress-bar[b-79q2u3h87f] {
    background: linear-gradient(90deg, #4caf50, #81c784);
}

/* Compact Chart Container */
.chart-container-compact[b-79q2u3h87f] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.chart-header-compact[b-79q2u3h87f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.chart-header-compact h3[b-79q2u3h87f] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.chart-legend-compact[b-79q2u3h87f] {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.chart-legend-compact .legend-item[b-79q2u3h87f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.chart-legend-compact .legend-color[b-79q2u3h87f] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.chart-legend-compact .legend-item.cpu .legend-color[b-79q2u3h87f] {
    background: #ff6b6b;
}

.chart-legend-compact .legend-item.memory .legend-color[b-79q2u3h87f] {
    background: #9c27b0;
}

.chart-legend-compact .legend-item.download .legend-color[b-79q2u3h87f] {
    background: #2196f3;
}

.chart-legend-compact .legend-item.upload .legend-color[b-79q2u3h87f] {
    background: #4caf50;
}

.chart-wrapper-compact[b-79q2u3h87f] {
    position: relative;
    height: 300px;
    margin-top: 1rem;
}

.chart-wrapper-compact canvas[b-79q2u3h87f] {
    max-width: 100%;
    height: auto;
}

/* Compact System Details */
.system-details-compact[b-79q2u3h87f] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.system-details-compact h3[b-79q2u3h87f] {
    margin: 0 0 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-color);
}

.details-grid-compact[b-79q2u3h87f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.details-grid-compact .detail-item[b-79q2u3h87f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    position: relative;
}

.details-grid-compact .detail-item:hover[b-79q2u3h87f] {
    background: var(--card-background);
    transform: translateY(-1px);
    border-color: var(--primary-color);
}

.details-grid-compact .detail-item.clickable[b-79q2u3h87f] {
    cursor: pointer;
}

.details-grid-compact .detail-item.clickable:hover[b-79q2u3h87f] {
    background: var(--primary-color-hover, rgba(13, 110, 253, 0.1));
    border-color: var(--primary-color);
}

.details-grid-compact .detail-item .detail-action-icon[b-79q2u3h87f] {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 0.75rem;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.details-grid-compact .detail-item.clickable:hover .detail-action-icon[b-79q2u3h87f] {
    opacity: 1;
    color: var(--primary-color);
}

.details-grid-compact .detail-item i[b-79q2u3h87f] {
    width: 20px;
    text-align: center;
    color: var(--primary-color);
    font-size: 1rem;
}

.details-grid-compact .detail-label[b-79q2u3h87f] {
    font-size: 0.875rem;
    color: var(--text-muted);
    font-weight: 500;
    flex: 1;
}

.details-grid-compact .detail-value[b-79q2u3h87f] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-color);
}

/* Loading and Error States */
.loading-container[b-79q2u3h87f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.loading-spinner[b-79q2u3h87f] {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.error-container[b-79q2u3h87f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.error-message[b-79q2u3h87f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 0.375rem;
    color: var(--danger-color);
}

.error-message i[b-79q2u3h87f] {
    font-size: 1.25rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .performance-page[b-79q2u3h87f] {
        padding: 0.5rem;
    }
    
    .page-header-compact[b-79q2u3h87f] {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .header-content[b-79q2u3h87f] {
        justify-content: center;
    }
    
    .performance-controls[b-79q2u3h87f] {
        justify-content: center;
    }
    
    .performance-stats-compact[b-79q2u3h87f] {
        grid-template-columns: 1fr;
    }
    
    .chart-header-compact[b-79q2u3h87f] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .chart-legend-compact[b-79q2u3h87f] {
        justify-content: center;
    }
    
    .chart-wrapper-compact[b-79q2u3h87f] {
        height: 250px;
    }
    
    .details-grid-compact[b-79q2u3h87f] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .header-content h1[b-79q2u3h87f] {
        font-size: 1.5rem;
    }
    
    .performance-controls .btn[b-79q2u3h87f] {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .stat-card-compact[b-79q2u3h87f] {
        padding: 0.75rem;
    }
    
    .stat-content .stat-value[b-79q2u3h87f] {
        font-size: 1.25rem;
    }
    
    .chart-wrapper-compact[b-79q2u3h87f] {
        height: 200px;
    }
}

.monitoring-status i[b-79q2u3h87f] {
    font-size: 0.8rem;
}

.loading-container[b-79q2u3h87f], .error-container[b-79q2u3h87f] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-spinner i[b-79q2u3h87f] {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.error-message[b-79q2u3h87f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--error-color);
    font-weight: 500;
    margin-bottom: 1rem;
}

.performance-stats[b-79q2u3h87f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card[b-79q2u3h87f] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.stat-card:hover[b-79q2u3h87f] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-header[b-79q2u3h87f] {
    display: flex;
    justify-content: between;
    align-items: center;
    margin-bottom: 1rem;
}

.stat-title[b-79q2u3h87f] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-icon[b-79q2u3h87f] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}

.stat-card.cpu .stat-icon[b-79q2u3h87f] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.stat-card.memory .stat-icon[b-79q2u3h87f] {
    background: linear-gradient(135deg, #4ecdc4, #44b3a8);
}

.stat-card.uptime .stat-icon[b-79q2u3h87f] {
    background: linear-gradient(135deg, #45b7d1, #3a9cc1);
}

.stat-card.download .stat-icon[b-79q2u3h87f] {
    background: linear-gradient(135deg, #96ceb4, #85b8a1);
}

.stat-card.upload .stat-icon[b-79q2u3h87f] {
    background: linear-gradient(135deg, #feca57, #ff9ff3);
}

.stat-card.cache .stat-icon[b-79q2u3h87f] {
    background: linear-gradient(135deg, #a55eea, #8b4cdb);
}

.stat-value[b-79q2u3h87f] {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.stat-change[b-79q2u3h87f] {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.stat-progress[b-79q2u3h87f] {
    width: 100%;
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    margin-top: 1rem;
    overflow: hidden;
}

.progress-bar[b-79q2u3h87f] {
    height: 100%;
    background: linear-gradient(90deg, #ff6b6b, #ee5a52);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Specific progress bar colors for different stat types */
.stat-card.cpu .progress-bar[b-79q2u3h87f] {
    background: linear-gradient(90deg, #ff6b6b, #ee5a52); /* Red gradient for CPU */
}

.stat-card.memory .progress-bar[b-79q2u3h87f] {
    background: linear-gradient(90deg, #9c27b0, #7b1fa2); /* Purple gradient for Memory */
}

.stat-card.download .progress-bar[b-79q2u3h87f] {
    background: linear-gradient(90deg, #2196f3, #1976d2); /* Blue gradient for Download */
}

.stat-card.upload .progress-bar[b-79q2u3h87f] {
    background: linear-gradient(90deg, #4caf50, #388e3c); /* Green gradient for Upload */
}

.chart-container[b-79q2u3h87f] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

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

.chart-header h3[b-79q2u3h87f] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
}

.chart-legend[b-79q2u3h87f] {
    display: flex;
    gap: 1.5rem;
}

.legend-item[b-79q2u3h87f] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.legend-color[b-79q2u3h87f] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-item.cpu .legend-color[b-79q2u3h87f] {
    background: #ff6b6b;
}

.legend-item.memory .legend-color[b-79q2u3h87f] {
    background: #9c27b0; /* Purple - matching the new memory color */
}

.legend-item.download .legend-color[b-79q2u3h87f] {
    background: #2196f3; /* Bright blue - matching the new download color */
}

.legend-item.upload .legend-color[b-79q2u3h87f] {
    background: #4caf50; /* Green - matching the new upload color */
}

.chart-wrapper[b-79q2u3h87f] {
    position: relative;
    height: 400px;
    width: 100%;
}

.chart-wrapper canvas[b-79q2u3h87f] {
    max-width: 100%;
    max-height: 100%;
}

.system-details[b-79q2u3h87f] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
}

.system-details h3[b-79q2u3h87f] {
    margin: 0 0 1.5rem 0;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-primary);
}

.details-grid[b-79q2u3h87f] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.detail-item[b-79q2u3h87f] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--background-secondary);
    border-radius: 8px;
}

.detail-label[b-79q2u3h87f] {
    font-weight: 500;
    color: var(--text-secondary);
}

.detail-value[b-79q2u3h87f] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .performance-page[b-79q2u3h87f] {
        padding: 1rem;
    }

    .page-header h1[b-79q2u3h87f] {
        font-size: 2rem;
    }

    .performance-controls[b-79q2u3h87f] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .monitoring-status[b-79q2u3h87f] {
        margin-left: 0;
        justify-content: center;
    }

    .performance-stats[b-79q2u3h87f] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .chart-header[b-79q2u3h87f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .chart-legend[b-79q2u3h87f] {
        gap: 1rem;
    }

    .chart-wrapper[b-79q2u3h87f] {
        height: 300px;
    }

    .details-grid[b-79q2u3h87f] {
        grid-template-columns: 1fr;
    }

    .detail-item[b-79q2u3h87f] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }
}

/* Performance-specific animations */
@keyframes pulse-b-79q2u3h87f {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.monitoring-status.active i[b-79q2u3h87f] {
    animation: pulse-b-79q2u3h87f 2s infinite;
}

/* Chart container hover effects */
.chart-container:hover[b-79q2u3h87f] {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
/* /Pages/Profile.razor.rz.scp.css */
/* Profile Page Styles - Modern Theme-Aware Design */
.profile-container[b-dmz7h84arj] {
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    padding: 1rem;
}

/* Loading States */
.loading-overlay[b-dmz7h84arj] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--bg-primary);
    opacity: 0.95;
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.loading-content[b-dmz7h84arj] {
    text-align: center;
    padding: 2rem;
    background: var(--card-background);
    border-radius: 16px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    max-width: 400px;
    width: 90%;
}

.loading-content h3[b-dmz7h84arj] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-weight: 600;
}

.loading-content p[b-dmz7h84arj] {
    margin: 0;
    color: var(--text-secondary);
}

.loading-spinner[b-dmz7h84arj] {
    margin-bottom: 1.5rem;
}

.spinner[b-dmz7h84arj] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-dmz7h84arj 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin-b-dmz7h84arj {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error State */
.error-state[b-dmz7h84arj] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    padding: 2rem;
}

.error-card[b-dmz7h84arj] {
    text-align: center;
    background: var(--card-background);
    border-radius: 16px;
    padding: 3rem 2rem;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-color);
    max-width: 500px;
    width: 100%;
}

.error-icon[b-dmz7h84arj] {
    font-size: 4rem;
    color: var(--danger-color);
    margin-bottom: 1.5rem;
}

.error-card h2[b-dmz7h84arj] {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 600;
}

.error-card p[b-dmz7h84arj] {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.error-actions[b-dmz7h84arj] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* Profile Header */
.profile-header[b-dmz7h84arj] {
    background: var(--card-background);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.profile-header-content[b-dmz7h84arj] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.profile-avatar[b-dmz7h84arj] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.avatar-placeholder[b-dmz7h84arj] {
    color: white;
    font-size: 2rem;
}

.profile-info h1[b-dmz7h84arj] {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1.75rem;
    font-weight: 600;
}

.profile-subtitle[b-dmz7h84arj] {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.membership-badge[b-dmz7h84arj] {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.membership-badge.free[b-dmz7h84arj] {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.membership-badge.premium[b-dmz7h84arj] {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #b45309;
    border: 1px solid #fbbf24;
}

.membership-badge.pro[b-dmz7h84arj] {
    background: linear-gradient(135deg, var(--primary-color), var(--info-color));
    color: white;
}

.refresh-btn[b-dmz7h84arj] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

.refresh-btn:hover[b-dmz7h84arj] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    transform: rotate(45deg);
}

/* Profile Content */
.profile-content[b-dmz7h84arj] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Profile Sections */
.profile-section[b-dmz7h84arj] {
    background: var(--card-background);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.section-header[b-dmz7h84arj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--bg-secondary);
}

.section-header h2[b-dmz7h84arj] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
    font-weight: 600;
}

.section-icon[b-dmz7h84arj] {
    color: var(--primary-color);
    font-size: 1.25rem;
}

/* Details Grid */
.details-grid[b-dmz7h84arj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.detail-item[b-dmz7h84arj] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.detail-item:hover[b-dmz7h84arj] {
    background: var(--bg-tertiary);
    transform: translateY(-1px);
}

.detail-label[b-dmz7h84arj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-label i[b-dmz7h84arj] {
    width: 16px;
    color: var(--primary-color);
}

.detail-value[b-dmz7h84arj] {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
}

/* Status Badges */
.status-badge[b-dmz7h84arj] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
}

.status-badge.verified[b-dmz7h84arj] {
    background: rgba(25, 135, 84, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(25, 135, 84, 0.2);
}

.status-badge.unverified[b-dmz7h84arj] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* Roles Grid */
.roles-grid[b-dmz7h84arj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.role-card[b-dmz7h84arj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    transition: all 0.2s ease;
}

.role-card:hover[b-dmz7h84arj] {
    background: var(--bg-tertiary);
    transform: translateY(-1px);
}

.role-icon[b-dmz7h84arj] {
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.role-content[b-dmz7h84arj] {
    flex: 1;
}

.role-description[b-dmz7h84arj] {
    color: var(--text-primary);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.role-value[b-dmz7h84arj] {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Actions Grid */
.actions-grid[b-dmz7h84arj] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
}

.action-button[b-dmz7h84arj] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.action-button:hover[b-dmz7h84arj] {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    color: inherit;
    text-decoration: none;
}

.action-icon[b-dmz7h84arj] {
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.action-icon.referral[b-dmz7h84arj] {
    background: linear-gradient(135deg, var(--warning-color), #ffb347);
    color: #b45309;
}

.action-content[b-dmz7h84arj] {
    flex: 1;
    text-align: left;
}

.action-title[b-dmz7h84arj] {
    color: var(--text-primary);
    font-weight: 600;
    margin-bottom: 0.25rem;
    font-size: 1rem;
}

.action-subtitle[b-dmz7h84arj] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.4;
}

.action-arrow[b-dmz7h84arj] {
    color: var(--text-muted);
    font-size: 0.875rem;
    transition: transform 0.2s ease;
}

.action-button:hover .action-arrow[b-dmz7h84arj] {
    transform: translateX(4px);
}

/* Buttons */
.btn[b-dmz7h84arj] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.btn-primary[b-dmz7h84arj] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover[b-dmz7h84arj] {
    background: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    color: white;
    text-decoration: none;
    filter: brightness(1.1);
}

.btn-outline[b-dmz7h84arj] {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-outline:hover[b-dmz7h84arj] {
    background: var(--bg-secondary);
    color: var(--text-primary);
    text-decoration: none;
}

/* Security Section Styles */
.security-grid[b-dmz7h84arj] {
    display: grid;
    gap: 1.5rem;
    margin-top: 1rem;
}

.security-card[b-dmz7h84arj] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.security-card:hover[b-dmz7h84arj] {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-hover);
}

.security-card-header[b-dmz7h84arj] {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.security-card-header:hover[b-dmz7h84arj] {
    background: var(--bg-hover);
}

.security-icon[b-dmz7h84arj] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.25rem;
    margin-right: 1rem;
    flex-shrink: 0;
}

.security-info[b-dmz7h84arj] {
    flex: 1;
}

.security-info h3[b-dmz7h84arj] {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
}

.security-info p[b-dmz7h84arj] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.btn-expand[b-dmz7h84arj] {
    width: 36px;
    height: 36px;
    border: none;
    background: var(--bg-tertiary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.3s ease;
    margin-left: 1rem;
}

.btn-expand:hover[b-dmz7h84arj] {
    background: var(--bg-hover);
    color: var(--text-primary);
    transform: scale(1.1);
}

.security-form[b-dmz7h84arj] {
    padding: 1.5rem;
    background: var(--bg-primary);
}

.form-group[b-dmz7h84arj] {
    margin-bottom: 1.5rem;
}

.form-group label[b-dmz7h84arj] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.form-control[b-dmz7h84arj] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: all 0.3s ease;
}

.form-control:focus[b-dmz7h84arj] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-25);
}

.form-hint[b-dmz7h84arj] {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
}

.form-actions[b-dmz7h84arj] {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.error-message[b-dmz7h84arj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--error-background);
    border: 1px solid var(--error-border);
    border-radius: 8px;
    color: var(--error-text);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.success-message[b-dmz7h84arj] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--success-background);
    border: 1px solid var(--success-border);
    border-radius: 8px;
    color: var(--success-text);
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.btn[b-dmz7h84arj] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    min-height: 44px;
}

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

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

.btn-primary:hover:not(:disabled)[b-dmz7h84arj] {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-outline[b-dmz7h84arj] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-outline:hover:not(:disabled)[b-dmz7h84arj] {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

/* Responsive Design */
@media (max-width: 768px) {
    .profile-container[b-dmz7h84arj] {
        padding: 0.5rem;
    }
    
    .profile-header[b-dmz7h84arj] {
        padding: 1.5rem;
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }
    
    .profile-header-content[b-dmz7h84arj] {
        flex-direction: column;
        text-align: center;
    }
    
    .refresh-btn[b-dmz7h84arj] {
        align-self: flex-end;
        position: absolute;
        top: 1rem;
        right: 1rem;
    }
    
    .details-grid[b-dmz7h84arj] {
        grid-template-columns: 1fr;
    }
    
    .roles-grid[b-dmz7h84arj] {
        grid-template-columns: 1fr;
    }
    
    .actions-grid[b-dmz7h84arj] {
        grid-template-columns: 1fr;
    }
    
    .error-actions[b-dmz7h84arj] {
        flex-direction: column;
    }
    
    .profile-info h1[b-dmz7h84arj] {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .profile-header[b-dmz7h84arj] {
        padding: 1rem;
    }
    
    .profile-section[b-dmz7h84arj] {
        padding: 1rem;
    }
    
    .action-button[b-dmz7h84arj] {
        padding: 1rem;
    }
    
    .action-icon[b-dmz7h84arj] {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }
    
    .loading-content[b-dmz7h84arj] {
        padding: 1.5rem;
    }
    
    .error-card[b-dmz7h84arj] {
        padding: 2rem 1.5rem;
    }
}

/* Focus and Accessibility */
.refresh-btn:focus[b-dmz7h84arj],
.action-button:focus[b-dmz7h84arj],
.btn:focus[b-dmz7h84arj] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Dark theme specific adjustments */
[data-theme="dark"] .membership-badge.premium[b-dmz7h84arj] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #451a03;
}

[data-theme="dark"] .action-icon.referral[b-dmz7h84arj] {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #451a03;
}

/* Animation for role value updates */
.role-value[b-dmz7h84arj] {
    transition: all 0.3s ease;
}

/* Better spacing for larger screens */
@media (min-width: 1200px) {
    .profile-container[b-dmz7h84arj] {
        max-width: 1200px;
        margin: 0 auto;
        padding: 2rem;
    }
    
    .details-grid[b-dmz7h84arj] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .actions-grid[b-dmz7h84arj] {
        grid-template-columns: repeat(2, 1fr);
    }

    .security-grid[b-dmz7h84arj] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Email confirmation styling */
.unverified-email-section[b-dmz7h84arj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.email-verification-notice[b-dmz7h84arj] {
    margin-top: 0.5rem;
}

.email-verification-notice p[b-dmz7h84arj] {
    margin: 0 0 0.5rem 0;
    font-size: 0.9rem;
}

.email-confirmation-form[b-dmz7h84arj] {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.confirmation-code-section[b-dmz7h84arj] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.confirmation-code-section .alert[b-dmz7h84arj] {
    margin: 0;
    padding: 0.75rem;
    font-size: 0.9rem;
}

.confirmation-code-section .form-group[b-dmz7h84arj] {
    margin: 0;
}

.confirmation-code-section .form-group label[b-dmz7h84arj] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    display: block;
}

.confirmation-code-section .form-group input[b-dmz7h84arj] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-background);
    color: var(--text-primary);
}

.confirmation-code-section .form-actions[b-dmz7h84arj] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.email-confirmation-form .error-message[b-dmz7h84arj],
.email-confirmation-form .success-message[b-dmz7h84arj] {
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.email-confirmation-form .error-message[b-dmz7h84arj] {
    background: var(--danger-color-light);
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
}

.email-confirmation-form .success-message[b-dmz7h84arj] {
    background: var(--success-color-light);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

/* Dark theme adjustments */
[data-theme="dark"] .confirmation-code-section .form-group input[b-dmz7h84arj] {
    background: var(--input-background-dark);
    border-color: var(--border-color-dark);
}

[data-theme="dark"] .confirmation-code-section .form-group input:focus[b-dmz7h84arj] {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--primary-color-alpha);
}
/* /Pages/Recent.razor.rz.scp.css */
.recent-container[b-hc8be9jsky] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.page-header[b-hc8be9jsky] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-title[b-hc8be9jsky] {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.page-title i[b-hc8be9jsky] {
    margin-right: 0.75rem;
    color: var(--primary-color);
}

.view-options[b-hc8be9jsky] {
    display: flex;
    gap: 0.5rem;
}

.view-btn[b-hc8be9jsky] {
    background: var(--card-background);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-duration) ease;
}

.view-btn:hover[b-hc8be9jsky] {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--primary-color-light);
}

.view-btn.active[b-hc8be9jsky] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.files-content[b-hc8be9jsky] {
    background: var(--card-background);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    overflow: hidden;
}

.files-list[b-hc8be9jsky] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.file-item[b-hc8be9jsky] {
    display: flex;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border-color);
    transition: background-color var(--transition-duration) ease;
}

.file-item:hover[b-hc8be9jsky] {
    background: var(--hover-color);
}

.file-item:last-child[b-hc8be9jsky] {
    border-bottom: none;
}

.file-icon[b-hc8be9jsky] {
    width: 40px;
    height: 40px;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 1.2rem;
    background: var(--icon-background);
    color: var(--icon-color);
}

.file-info[b-hc8be9jsky] {
    flex: 1;
    min-width: 0;
}

.file-name[b-hc8be9jsky] {
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.file-meta[b-hc8be9jsky] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    display: flex;
    gap: 1rem;
}

.files-grid[b-hc8be9jsky] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
}

.file-card[b-hc8be9jsky] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: all var(--transition-duration) ease;
    cursor: pointer;
}

.file-card:hover[b-hc8be9jsky] {
    transform: translateY(-2px);
    box-shadow: var(--hover-shadow);
    border-color: var(--primary-color);
}

.file-card .file-icon[b-hc8be9jsky] {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    font-size: 2rem;
    border-radius: 12px;
}

.file-card .file-name[b-hc8be9jsky] {
    font-size: 0.875rem;
    margin: 0;
}

.file-actions[b-hc8be9jsky] {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.empty-state[b-hc8be9jsky] {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 768px) {
    .recent-container[b-hc8be9jsky] {
        padding: 10px;
    }
    
    .page-header[b-hc8be9jsky] {
        text-align: center;
    }
    
    .view-options[b-hc8be9jsky] {
        margin-top: 1rem;
    }
}
/* /Pages/Settings.razor.rz.scp.css */
/* Settings Page Styles - Consistent with CloudDrive2 Design */
.settings-page[b-kmaldmfelf] {
    min-height: 100vh;
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 1rem;
}

/* Header - Matching CloudStorages design */
.settings-header[b-kmaldmfelf] {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e40af 0%, #0ea5e9 100%);
    border-radius: 16px;
    padding: 1.5rem;
    color: white;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

.settings-header-content[b-kmaldmfelf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

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

.priority-list[b-kmaldmfelf] {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.6rem;
    align-items: center;
    overflow-x: auto;
    padding: 0.25rem 0.25rem;
}
.priority-item[b-kmaldmfelf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}
.priority-badge[b-kmaldmfelf] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 120px; /* wider */
    justify-content: space-between;
    background: var(--cdm-surface-2, rgba(255,255,255,0.08));
    color: var(--cdm-text, #fff);
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    font-size: 0.95rem;
    white-space: nowrap;
}
.priority-btn[b-kmaldmfelf] {
    width: 28px;
    height: 28px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--cdm-text-muted, #cfcfcf);
    background: transparent;
    padding: 0;
    line-height: 1;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.priority-btn i[b-kmaldmfelf] { font-size: 0.8rem; }
.priority-btn:hover:not(:disabled)[b-kmaldmfelf] {
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-color: rgba(255,255,255,0.28);
}
.priority-btn:disabled[b-kmaldmfelf] { opacity: 0.35; cursor: not-allowed; }

/* Inner controls inside the badge */
.priority-inbtn[b-kmaldmfelf] {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.18);
    color: var(--cdm-text-muted, #cfcfcf);
    background: transparent;
    padding: 0;
    line-height: 1;
}
.priority-inbtn i[b-kmaldmfelf] { font-size: 0.65rem; }
.priority-inbtn:hover:not(:disabled)[b-kmaldmfelf] {
    background: rgba(255,255,255,0.08);
    color: #fff;
}
.priority-inbtn:disabled[b-kmaldmfelf] { opacity: 0.35; cursor: not-allowed; }

.priority-label[b-kmaldmfelf] {
    flex: 1 1 auto;
    text-align: center;
    padding: 0 0.25rem;
}

/* Light theme adjustments for priority badges and inner buttons */
:root[data-theme="light"] .priority-badge[b-kmaldmfelf] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

:root[data-theme="light"] .priority-inbtn[b-kmaldmfelf] {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

:root[data-theme="light"] .priority-inbtn:hover:not(:disabled)[b-kmaldmfelf] {
    background: var(--bg-quaternary);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

:root[data-theme="light"] .priority-inbtn:disabled[b-kmaldmfelf] {
    opacity: 0.5;
    color: var(--text-muted);
    border-color: var(--border-color);
}

/* Improve focus visibility for accessibility */
.priority-inbtn:focus-visible[b-kmaldmfelf] {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* Content */
.settings-content[b-kmaldmfelf] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

/* Loading State */
.settings-loading[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    background: var(--card-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 2rem;
    text-align: center;
}

.loading-spinner[b-kmaldmfelf] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-kmaldmfelf 1s linear infinite;
}

.loading-spinner i[b-kmaldmfelf] {
    font-size: 2rem;
    color: var(--primary-color);
}

/* Error State */
.settings-error[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    gap: 1rem;
    text-align: center;
    background: var(--card-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 2rem;
}

.error-icon i[b-kmaldmfelf] {
    font-size: 3rem;
    color: var(--danger-color);
    opacity: 0.7;
}

.settings-error h3[b-kmaldmfelf] {
    margin: 0;
    color: var(--danger-color);
    font-size: 1.5rem;
    font-weight: 600;
}

.settings-error p[b-kmaldmfelf] {
    margin: 0;
    color: var(--text-secondary);
    max-width: 400px;
    line-height: 1.5;
}

/* Settings Sections */
.settings-sections[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Tab Navigation - Desktop */
.tab-navigation[b-kmaldmfelf] {
    background: var(--card-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.nav[b-kmaldmfelf] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    background: transparent;
}

.nav-tabs[b-kmaldmfelf] {
    border-bottom: none;
}

.nav-item[b-kmaldmfelf] {
    margin: 0;
}

.nav-link[b-kmaldmfelf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0;
    text-decoration: none;
}

.nav-link:hover[b-kmaldmfelf] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.nav-link.active[b-kmaldmfelf] {
    background: var(--primary-color);
    color: white;
    position: relative;
}

.nav-link i[b-kmaldmfelf] {
    font-size: 1rem;
}

/* Tab Selector - Mobile */
.tab-selector[b-kmaldmfelf] {
    background: var(--card-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    padding: 1rem;
}

.form-select[b-kmaldmfelf] {
    width: 100%;
    padding: 0.75rem;
    padding-right: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    transition: all 0.2s ease;
}

.form-select:focus[b-kmaldmfelf] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Responsive Tab Visibility */
.desktop-only[b-kmaldmfelf] {
    display: block;
}

.mobile-only[b-kmaldmfelf] {
    display: none;
}

/* Tab Content */
.tab-content[b-kmaldmfelf] {
    margin-top: 1.5rem;
}

/* Settings Section */
.settings-section[b-kmaldmfelf] {
    background: var(--card-background);
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Section Header */
.section-header[b-kmaldmfelf] {
    background: linear-gradient(135deg, #1e40af 0%, #0ea5e9 100%);
    color: white;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
}

.section-header h2[b-kmaldmfelf] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
}

.section-header h2 i[b-kmaldmfelf] {
    color: rgba(255, 255, 255, 0.9);
    width: 1.25rem;
    text-align: center;
}

.section-description[b-kmaldmfelf] {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Section Content */
.section-content[b-kmaldmfelf] {
    padding: 1.5rem;
}

/* Form Groups */
.form-group[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

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

.form-label[b-kmaldmfelf] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-label small[b-kmaldmfelf] {
    font-weight: 400;
    color: var(--text-muted);
}

.form-control[b-kmaldmfelf] {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.form-control:focus[b-kmaldmfelf] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form-control[b-kmaldmfelf]::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

/* Textarea */
textarea.form-control[b-kmaldmfelf] {
    resize: vertical;
    min-height: 80px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
}

/* Checkbox Styles */
.form-check[b-kmaldmfelf] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.form-check-input[b-kmaldmfelf] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.form-check-label[b-kmaldmfelf] {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.form-switch .form-check-input[b-kmaldmfelf] {
    width: auto;
}

/* Form Text */
.form-text[b-kmaldmfelf] {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin-top: 0.25rem;
}

/* Input Group */
.input-group[b-kmaldmfelf] {
    display: flex;
    border-radius: 8px;
    overflow: hidden;
}

.input-group .form-control[b-kmaldmfelf] {
    border-radius: 0;
    border-right: none;
}

.input-group .btn[b-kmaldmfelf] {
    border-radius: 0;
    border-left: none;
    border-color: var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.input-group .btn:hover[b-kmaldmfelf] {
    background: var(--bg-quaternary);
    color: var(--text-primary);
}

/* Speed Unit Selector */
.speed-unit-select[b-kmaldmfelf] {
    max-width: 100px;
    padding-right: 2.5rem;
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    border-color: var(--border-color);
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.2em 1.2em;
}

.speed-unit-select:focus[b-kmaldmfelf] {
    border-color: var(--primary-color);
    box-shadow: none;
    background: var(--input-background);
    color: var(--text-primary);
}

.input-group .form-control:focus + .speed-unit-select[b-kmaldmfelf] {
    border-color: var(--primary-color);
}

/* Theme-specific dropdown arrows */
:root[data-theme="dark"] .form-select[b-kmaldmfelf],
:root[data-theme="dark"] .speed-unit-select[b-kmaldmfelf],
:root:not([data-theme]) .form-select[b-kmaldmfelf],
:root:not([data-theme]) .speed-unit-select[b-kmaldmfelf] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

:root[data-theme="light"] .form-select[b-kmaldmfelf],
:root[data-theme="light"] .speed-unit-select[b-kmaldmfelf] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Range Slider */
.form-range[b-kmaldmfelf] {
    width: 100%;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.form-range[b-kmaldmfelf]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.form-range[b-kmaldmfelf]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Buttons */
.btn[b-kmaldmfelf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

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

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

.btn-primary:hover:not(:disabled)[b-kmaldmfelf] {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-secondary[b-kmaldmfelf] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-kmaldmfelf] {
    background: var(--bg-quaternary);
    border-color: var(--text-muted);
}

.btn-outline[b-kmaldmfelf] {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-outline:hover:not(:disabled)[b-kmaldmfelf] {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary[b-kmaldmfelf] {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
}

.btn-outline-primary:hover:not(:disabled)[b-kmaldmfelf] {
    background: var(--primary-color);
    color: white;
}

.btn-outline-secondary[b-kmaldmfelf] {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-outline-secondary:hover:not(:disabled)[b-kmaldmfelf] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--text-muted);
}

/* Success Message */
.success-message[b-kmaldmfelf] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #16a34a;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.success-message i[b-kmaldmfelf] {
    color: #16a34a;
}

/* Error Message */
.error-message[b-kmaldmfelf] {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    color: #dc2626;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.error-message i[b-kmaldmfelf] {
    color: #dc2626;
}

/* Toast Notifications */
.toast-overlay[b-kmaldmfelf] {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 1050;
    pointer-events: none;
}

.toast-notification[b-kmaldmfelf] {
    background: var(--card-background);
    opacity: 0.95;
    backdrop-filter: blur(10px);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    min-width: 280px;
    max-width: 350px;
    pointer-events: all;
    animation: slideInRight-b-kmaldmfelf 0.3s ease;
}

.toast-notification.success[b-kmaldmfelf] {
    border-color: rgba(34, 197, 94, 0.3);
}

.toast-notification.error[b-kmaldmfelf] {
    border-color: rgba(239, 68, 68, 0.3);
}

.toast-header[b-kmaldmfelf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.toast-notification.success .toast-header[b-kmaldmfelf] {
    background: rgba(34, 197, 94, 0.1);
    color: #16a34a;
}

.toast-notification.error .toast-header[b-kmaldmfelf] {
    background: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

.toast-header i[b-kmaldmfelf] {
    font-size: 1rem;
}

.toast-header strong[b-kmaldmfelf] {
    flex: 1;
    font-weight: 600;
    font-size: 0.8rem;
}

.toast-close[b-kmaldmfelf] {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    transition: background-color 0.2s ease;
}

.toast-close:hover[b-kmaldmfelf] {
    background: rgba(0, 0, 0, 0.1);
}

.toast-body[b-kmaldmfelf] {
    padding: 0.75rem;
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--text-primary);
}

@keyframes spin-b-kmaldmfelf {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

.settings-section[b-kmaldmfelf] {
    animation: fadeIn-b-kmaldmfelf 0.3s ease;
}

@keyframes slideInRight-b-kmaldmfelf {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Enhanced Cache Persistence UI */
.cache-persistence-container[b-kmaldmfelf] {
    background: var(--bg-tertiary);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.cache-persistence-container:hover[b-kmaldmfelf] {
    border-color: var(--primary-color);
    background: var(--bg-quaternary);
}

.cache-persistence-label[b-kmaldmfelf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
}

.cache-persistence-title[b-kmaldmfelf] {
    color: var(--text-primary);
}

.cache-persistence-status[b-kmaldmfelf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.cache-persistence-info[b-kmaldmfelf] {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 0.5rem;
    color: #16a34a;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cache-persistence-info i[b-kmaldmfelf] {
    color: #16a34a;
}

/* Modal and Dialog Styles */
.modal-overlay[b-kmaldmfelf] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 1rem;
}

.confirmation-dialog[b-kmaldmfelf] {
    background: var(--bg-secondary);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border: 1px solid var(--border-color);
    max-width: 500px;
    width: 100%;
    animation: modalSlideIn-b-kmaldmfelf 0.3s ease-out;
}

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

.dialog-header[b-kmaldmfelf] {
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
}

.dialog-header h3[b-kmaldmfelf] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.dialog-header i[b-kmaldmfelf] {
    font-size: 1.3rem;
}

.dialog-content[b-kmaldmfelf] {
    padding: 1.5rem;
}

.dialog-content p[b-kmaldmfelf] {
    margin: 0 0 1rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.warning-details[b-kmaldmfelf] {
    background: var(--bg-warning);
    border: 1px solid var(--border-warning);
    border-radius: 8px;
    padding: 0.75rem;
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-warning);
}

.warning-details i[b-kmaldmfelf] {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.dialog-footer[b-kmaldmfelf] {
    padding: 1rem 1.5rem 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    border-top: 1px solid var(--border-color);
}

.dialog-footer .btn[b-kmaldmfelf] {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.dialog-footer .btn:hover[b-kmaldmfelf] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* No duplicate block: priority styles defined above */

@media (max-width: 768px) {
    .settings-page[b-kmaldmfelf] {
        padding: 0.5rem;
    }
    
    .settings-header[b-kmaldmfelf] {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .settings-title h1[b-kmaldmfelf] {
        font-size: 1.25rem;
    }
    
    .settings-title i[b-kmaldmfelf] {
        font-size: 1.25rem;
    }
    
    .settings-actions .btn[b-kmaldmfelf] {
        padding: 0.5rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .section-header[b-kmaldmfelf] {
        padding: 1rem;
    }
    
    .section-header h2[b-kmaldmfelf] {
        font-size: 1.1rem;
    }
    
    .section-content[b-kmaldmfelf] {
        padding: 1rem;
    }
    
    .settings-content[b-kmaldmfelf] {
        padding: 0;
    }
    
    /* Hide desktop tabs on mobile, show dropdown */
    .desktop-only[b-kmaldmfelf] {
        display: none !important;
    }
    
    .mobile-only[b-kmaldmfelf] {
        display: block !important;
    }
    
    .modal-overlay[b-kmaldmfelf] {
        padding: 0.5rem;
    }
    
    .confirmation-dialog[b-kmaldmfelf] {
        max-width: 100%;
    }
    
    .dialog-header[b-kmaldmfelf],
    .dialog-content[b-kmaldmfelf],
    .dialog-footer[b-kmaldmfelf] {
        padding: 1rem;
    }
    
    .dialog-footer[b-kmaldmfelf] {
        flex-direction: column;
    }
    
    .dialog-footer .btn[b-kmaldmfelf] {
        width: 100%;
    }
}

/* Log Files Styles */
.settings-subsection-title[b-kmaldmfelf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--border-color);
}

.settings-subsection-title i[b-kmaldmfelf] {
    font-size: 1rem;
    color: var(--primary-color);
}

/* Log Levels Grid */
.log-levels-grid[b-kmaldmfelf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.log-level-item[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.log-level-item .form-label[b-kmaldmfelf] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.25rem;
}

.log-level-item .form-select[b-kmaldmfelf] {
    font-size: 0.875rem;
}

/* Log Files Table */
.log-files-loading[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    gap: 1rem;
}

.no-log-files[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    text-align: center;
    gap: 1rem;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.empty-state-icon i[b-kmaldmfelf] {
    font-size: 3rem;
    color: var(--text-muted);
    opacity: 0.7;
}

.log-files-table-container[b-kmaldmfelf] {
    background: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.log-files-table[b-kmaldmfelf] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.log-files-table thead[b-kmaldmfelf] {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
    color: white;
}

.log-files-table th[b-kmaldmfelf] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.log-files-table tbody tr[b-kmaldmfelf] {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.log-files-table tbody tr:hover[b-kmaldmfelf] {
    background: var(--bg-secondary);
}

.log-files-table tbody tr:last-child[b-kmaldmfelf] {
    border-bottom: none;
}

.log-files-table td[b-kmaldmfelf] {
    padding: 1rem;
    vertical-align: middle;
}

.log-file-name[b-kmaldmfelf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    color: var(--text-primary);
}

.log-file-name i[b-kmaldmfelf] {
    color: var(--primary-color);
    font-size: 0.875rem;
}

.log-file-size[b-kmaldmfelf] {
    color: var(--text-secondary);
    font-family: monospace;
}

.log-file-modified[b-kmaldmfelf] {
    color: var(--text-secondary);
    font-family: monospace;
}

.log-file-actions[b-kmaldmfelf] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.log-file-actions .btn-sm[b-kmaldmfelf] {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
}

.log-file-actions .btn-sm i[b-kmaldmfelf] {
    font-size: 0.75rem;
}

/* Responsive Design for Log Files */
@media (max-width: 768px) {
    .log-levels-grid[b-kmaldmfelf] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Mobile Log Files Cards */
.log-files-cards[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.log-file-card[b-kmaldmfelf] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease;
}

.log-file-card:hover[b-kmaldmfelf] {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.log-file-card-header[b-kmaldmfelf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.log-file-card-title[b-kmaldmfelf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0; /* Allow text to truncate */
}

.log-file-card-title i[b-kmaldmfelf] {
    color: var(--primary-color);
    font-size: 1rem;
    flex-shrink: 0;
}

.log-file-name-text[b-kmaldmfelf] {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.875rem;
}

.log-file-card-actions[b-kmaldmfelf] {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

.log-file-card-actions .btn-sm[b-kmaldmfelf] {
    padding: 0.5rem;
    min-width: 36px;
    justify-content: center;
}

.log-file-card-actions .btn-sm i[b-kmaldmfelf] {
    margin: 0;
    font-size: 0.875rem;
}

.log-file-card-details[b-kmaldmfelf] {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.log-file-detail[b-kmaldmfelf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.log-file-detail-label[b-kmaldmfelf] {
    font-weight: 500;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.log-file-detail-value[b-kmaldmfelf] {
    color: var(--text-primary);
    font-family: monospace;
    text-align: right;
}

/* Desktop/Mobile visibility - Updated for log files */
@media (max-width: 768px) {
    .log-files-table-container.desktop-only[b-kmaldmfelf] {
        display: none !important;
    }
    
    .log-files-cards.mobile-only[b-kmaldmfelf] {
        display: block !important;
    }
}

@media (min-width: 769px) {
    .log-files-table-container.desktop-only[b-kmaldmfelf] {
        display: block !important;
    }
    
    .log-files-cards.mobile-only[b-kmaldmfelf] {
        display: none !important;
    }
}

/* Webhook Management Styles */
.webhook-management[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.webhook-header[b-kmaldmfelf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.webhooks-loading[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    background: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.webhooks-loading .loading-spinner[b-kmaldmfelf] {
    margin-bottom: 1rem;
}

.webhooks-loading .loading-spinner i[b-kmaldmfelf] {
    font-size: 2rem;
    color: var(--text-secondary);
}

.webhooks-loading p[b-kmaldmfelf] {
    color: var(--text-secondary);
    margin: 0;
}

.no-webhooks[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
    background: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.no-webhooks .empty-state-icon[b-kmaldmfelf] {
    margin-bottom: 1rem;
}

.no-webhooks .empty-state-icon i[b-kmaldmfelf] {
    font-size: 3rem;
    color: var(--text-secondary);
}

.no-webhooks p[b-kmaldmfelf] {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Webhook Form Styles */
.form-section[b-kmaldmfelf] {
    background: var(--card-background);
    border-radius: 12px;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    margin-bottom: 1rem;
}

.form-actions[b-kmaldmfelf] {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Webhook Table Styles */
.webhooks-table-container[b-kmaldmfelf] {
    background: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.webhooks-table[b-kmaldmfelf] {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.webhooks-table thead[b-kmaldmfelf] {
    background: rgba(var(--primary-color-rgb), 0.1);
    border-bottom: 2px solid var(--border-color);
}

.webhooks-table th[b-kmaldmfelf] {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-primary);
}

.webhooks-table tbody tr[b-kmaldmfelf] {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.webhooks-table tbody tr:hover[b-kmaldmfelf] {
    background: rgba(var(--primary-color-rgb), 0.05);
}

.webhooks-table tbody tr:last-child[b-kmaldmfelf] {
    border-bottom: none;
}

.webhooks-table td[b-kmaldmfelf] {
    padding: 1rem;
    vertical-align: middle;
}

.webhook-file-name[b-kmaldmfelf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.webhook-file-name i[b-kmaldmfelf] {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.webhook-status .badge[b-kmaldmfelf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 6px;
    font-weight: 500;
}

.webhook-status .badge.badge-success[b-kmaldmfelf] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.webhook-status .badge.badge-warning[b-kmaldmfelf] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.webhook-actions[b-kmaldmfelf] {
    display: flex;
    gap: 0.5rem;
}

.webhook-actions .btn[b-kmaldmfelf] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Mobile Webhook Cards */
.webhooks-cards[b-kmaldmfelf] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.webhook-card[b-kmaldmfelf] {
    background: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.webhook-card:hover[b-kmaldmfelf] {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.webhook-card-header[b-kmaldmfelf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.webhook-card-title[b-kmaldmfelf] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.webhook-card-title i[b-kmaldmfelf] {
    color: var(--text-secondary);
    font-size: 1.1rem;
}

.webhook-card-status .badge[b-kmaldmfelf] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 6px;
    font-weight: 500;
}

.webhook-card-status .badge.badge-success[b-kmaldmfelf] {
    background: rgba(34, 197, 94, 0.1);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.webhook-card-status .badge.badge-warning[b-kmaldmfelf] {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.webhook-card-actions[b-kmaldmfelf] {
    display: flex;
    gap: 0.5rem;
}

.webhook-card-actions .btn[b-kmaldmfelf] {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

/* Responsive Design for Webhooks */
@media (max-width: 768px) {
    .webhooks-table-container.desktop-only[b-kmaldmfelf] {
        display: none !important;
    }
    
    .webhooks-cards.mobile-only[b-kmaldmfelf] {
        display: flex !important;
    }
    
    .webhook-header[b-kmaldmfelf] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .form-actions[b-kmaldmfelf] {
        flex-direction: column;
    }
    
    .form-actions .btn[b-kmaldmfelf] {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 769px) {
    .webhooks-table-container.desktop-only[b-kmaldmfelf] {
        display: block !important;
    }
    
    .webhooks-cards.mobile-only[b-kmaldmfelf] {
        display: none !important;
    }
}

/* Log Modal Styles */
.log-modal-backdrop[b-kmaldmfelf] {
    position: fixed;
    top: 60px; /* Account for navigation height */
    left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 1050;
    display: flex;
    align-items: flex-start; /* Align to top instead of center */
    justify-content: center;
    padding: 10px 20px 20px 20px; /* Reduced top padding */
}

.log-modal[b-kmaldmfelf] {
    background: var(--card-background);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    width: 90%;
    max-width: 80vw;
    height: calc(100vh - 180px); /* nav (60px) + top margin (10px) + bottom spacing (50px) + top padding (10px) + extra buffer (50px) */
    max-height: calc(100vh - 180px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    margin-top: 10px; /* Small gap from navigation */
}

.log-modal-header[b-kmaldmfelf] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
    background: var(--card-background);
    z-index: 1;
}

.log-modal-title[b-kmaldmfelf] {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin: 0;
}

.log-modal-close[b-kmaldmfelf] {
    background: none;
    border: none;
    font-size: 18px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.log-modal-close:hover[b-kmaldmfelf] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.log-modal-body[b-kmaldmfelf] {
    flex: 1;
    overflow: hidden;
    padding: 0;
    min-height: 0;
    height: 100%;
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
    .log-modal[b-kmaldmfelf] {
        height: calc(100vh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        max-height: calc(100vh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    
    .log-modal-backdrop[b-kmaldmfelf] {
        height: calc(100vh - 60px);
        height: calc(-webkit-fill-available - 60px);
    }
}

@media (max-width: 768px) {
    .log-modal-backdrop[b-kmaldmfelf] {
        top: 50px; /* Smaller nav height on mobile */
        height: calc(100vh - 50px);
        padding: 5px 10px 15px 10px; /* Reduced padding for mobile */
    }
    
    .log-modal[b-kmaldmfelf] {
        width: 95%;
        height: calc(100vh - 140px); /* nav (50px) + top margin (5px) + bottom spacing (40px) + top padding (5px) + buffer (40px) */
        max-height: calc(100vh - 140px);
        margin-top: 5px; /* Smaller gap on mobile */
    }
    
    .log-modal-header[b-kmaldmfelf] {
        padding: 10px 12px;
    }
    
    .log-modal-title[b-kmaldmfelf] {
        font-size: 13px;
    }
    
    /* Additional iOS mobile fixes */
    @supports (-webkit-touch-callout: none) {
        .log-modal[b-kmaldmfelf] {
            height: calc(100vh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
            max-height: calc(100vh - 140px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        }
        
        .log-modal-backdrop[b-kmaldmfelf] {
            height: calc(-webkit-fill-available - 50px);
        }
    }
}

/* /Pages/Tasks.razor.rz.scp.css */
.tasks-page[b-ow39x3997g] {
    padding: 0.25rem;
    max-width: 100%;
    margin: 0;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    height: calc(100vh - 80px); /* Use fixed value instead of CSS variable to be safe */
    max-height: calc(100vh - 80px);
    overflow: hidden; /* Prevent page-level scrolling */
}

/* Mobile-specific full width and fixed height layout */
@media (max-width: 768px) {
    .tasks-page[b-ow39x3997g] {
        padding: 0;
        margin: 0;
        /* Ensure fixed height and width to prevent scrolling */
        height: calc(100vh - 80px);
        max-height: calc(100vh - 80px);
        width: 100vw;
        max-width: 100vw;
        overflow: hidden; /* Prevent both vertical and horizontal page scrolling */
        overflow-x: hidden; /* Explicitly prevent horizontal scrolling */
        box-sizing: border-box; /* Include padding and border in width calculation */
    }
    
    .page-header[b-ow39x3997g] {
        padding: 0.25rem 0.5rem; /* Reduced top/bottom padding from 0.5rem */
        margin-bottom: 0;
        margin-top: 0; /* Ensure no top margin */
        overflow-x: hidden; /* Prevent horizontal overflow in header */
        /* Allow dropdown to be visible */
        overflow-y: visible;
        position: relative;
        z-index: 1000; /* Ensure header is above other content */
    }
    
    .task-summary[b-ow39x3997g] {
        padding: 0 0.5rem;
        margin-bottom: 0.5rem;
        gap: 0.25rem;
        margin-top: 0; /* Remove any top margin */
        overflow-x: hidden; /* Prevent horizontal overflow in summary */
    }
    
    .task-section[b-ow39x3997g] {
        margin: 0; /* Ensure no margins */
        padding: 0; /* Remove padding too */
        border-radius: 0;
        border-left: none;
        border-right: none;
        flex: 1; /* Fill available space */
        overflow: hidden; /* Prevent mobile overflow affecting page */
        overflow-x: hidden; /* Explicitly prevent horizontal scrolling */
        margin-bottom: 0; /* No bottom margin on mobile */
        width: 100%; /* Ensure full width */
        max-width: 100%; /* Prevent width overflow */
        box-sizing: border-box; /* Include padding and border in width calculation */
    }
    
    .task-section.upload-section.modern-upload[b-ow39x3997g] {
        flex: 1; /* Fill available space */
        margin: 0; /* Remove all margins for precise fit */
        overflow: hidden; /* Prevent overflow affecting page */
        overflow-x: hidden; /* Explicitly prevent horizontal scrolling */
        padding-bottom: 60px; /* Reserve space for fixed pagination on mobile */
        width: 100%; /* Ensure full width */
        max-width: 100%; /* Prevent width overflow */
        box-sizing: border-box; /* Include padding and border in width calculation */
    }
}

/* Desktop Header - Performance.razor style */
.page-header[b-ow39x3997g] {
    margin-bottom: 0.5rem; /* Reduced from 1.5rem to prevent overflow */
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem; /* Added bottom padding */
    border-bottom: 2px solid var(--border-color); /* Added bottom border like Performance page */
}

.page-header-left[b-ow39x3997g] {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem; /* Added gap between title and description */
}

.page-header-right[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Reduced gap slightly for better spacing */
}

.update-interval-selector[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.update-interval-selector label[b-ow39x3997g] {
    font-weight: 500;
    white-space: nowrap;
}

.interval-select[b-ow39x3997g] {
    padding: 0.25rem 0.5rem; /* Reduced padding to fit better in the styled container */
    border: none; /* Remove border since container has border */
    border-radius: 0.25rem; /* Smaller radius */
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 60px;
}

.interval-select:hover[b-ow39x3997g] {
    border-color: var(--primary-color);
}

.interval-select:focus[b-ow39x3997g] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.2);
}

.refresh-control-btn[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem; /* Reduced to match btn-sm size */
    border: 1px solid var(--border-color);
    border-radius: 0.375rem; /* Match Performance page */
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.refresh-control-btn:hover[b-ow39x3997g] {
    border-color: var(--primary-color);
    background: var(--primary-color);
    color: white;
    transform: translateY(-1px); /* Added subtle lift effect like Performance page */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Added shadow on hover */
}

.refresh-control-btn.active[b-ow39x3997g] {
    background: var(--success-color);
    border-color: var(--success-color);
    color: white;
}

.refresh-control-btn.paused[b-ow39x3997g] {
    background: var(--warning-color);
    border-color: var(--warning-color);
    color: white;
}

.refresh-control-btn i[b-ow39x3997g] {
    font-size: 0.8rem;
}

/* Desktop Title styling - matches Performance page header-content */
.desktop-title[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mobile-tab-selector-header[b-ow39x3997g] {
    display: none; /* Hidden on desktop */
}

.page-header h1[b-ow39x3997g] {
    font-size: 1.8rem; /* Increased from 1.25rem to match Performance page */
    font-weight: 600; /* Reduced from 700 to match Performance page */
    color: var(--text-primary); /* Changed to text-primary instead of primary-color */
    margin: 0;
}

.page-description[b-ow39x3997g] {
    font-size: 0.875rem; /* Increased from 0.8rem */
    color: var(--text-secondary); /* Changed from text-muted to text-secondary */
    margin: 0;
}

/* Loading and Error States */
.loading-container[b-ow39x3997g], .error-container[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-spinner i[b-ow39x3997g] {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.error-message[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--danger-color);
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Summary Cards - Desktop Default Style */
.task-summary[b-ow39x3997g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.25rem;
    margin-bottom: 0.25rem;
    flex-shrink: 0;
}

/* Desktop-specific layout overrides for summary cards */
@media (min-width: 769px) {
    .tasks-page .task-summary[b-ow39x3997g] {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
        gap: 0.25rem !important;
        margin-bottom: 0.25rem !important;
        flex-direction: initial !important;
    }
    
    .tasks-page .summary-card[b-ow39x3997g] {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        background: var(--card-background);
        border: 1px solid var(--border-color);
        border-radius: 4px !important;
        padding: 0.5rem !important;
        cursor: pointer;
        transition: all 0.2s ease;
        position: relative;
        overflow: hidden;
        height: 80px !important; /* Even more compact */
        align-items: initial !important;
        min-width: initial !important;
        flex-shrink: initial !important;
        scroll-snap-align: initial !important;
        text-align: initial !important;
        min-height: initial !important;
    }
    
    .tasks-page .summary-card-header[b-ow39x3997g] {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        margin-bottom: 0.25rem !important;
        flex-direction: row !important;
        margin-right: initial !important;
        gap: initial !important;
        flex-shrink: initial !important;
    }
    
    .tasks-page .summary-card-title[b-ow39x3997g] {
        font-size: 0.7rem !important;
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: initial !important;
        white-space: initial !important;
        order: initial !important;
        margin: 0 !important;
    }
    
    .tasks-page .summary-card-icon[b-ow39x3997g] {
        width: 24px !important;
        height: 24px !important;
        border-radius: 6px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.875rem !important;
        color: white;
        order: initial !important;
    }
    
    .tasks-page .summary-count[b-ow39x3997g] {
        font-size: 1.25rem !important;
        font-weight: 700;
        color: var(--text-primary);
        margin-bottom: 0.125rem !important;
        line-height: 1;
        margin: 0 0 0.125rem 0 !important;
        flex-shrink: initial !important;
    }
    
    .tasks-page .summary-subtitle[b-ow39x3997g] {
        font-size: 0.7rem !important;
        color: var(--text-muted);
        font-weight: 500;
        margin: 0 !important;
        flex: initial !important;
        text-align: initial !important;
        white-space: initial !important;
        overflow: initial !important;
        text-overflow: initial !important;
        transition: all 0.2s ease;
    }
    
    /* Desktop active subtitle styles - just text color */
    .tasks-page .summary-subtitle.active[b-ow39x3997g] {
        color: var(--success-color) !important;
        font-weight: 600 !important;
        font-size: 0.7rem !important; /* Keep same size */
    }
    
    .tasks-page .summary-subtitle.active.upload[b-ow39x3997g] {
        color: var(--primary-color) !important;
    }
    
    .tasks-page .summary-subtitle.active.download[b-ow39x3997g] {
        color: var(--info-color, #17a2b8) !important;
    }
    
    .tasks-page .summary-subtitle.active.copy[b-ow39x3997g] {
        color: var(--warning-color) !important;
    }
}

.summary-card[b-ow39x3997g] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    display: block;
    height: 80px; /* Even more compact */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.summary-card[b-ow39x3997g]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: transparent;
    transition: all 0.2s ease;
}

.summary-card.copy[b-ow39x3997g]::before {
    background: linear-gradient(90deg, #ff6b6b, #ee5a52);
}

.summary-card.download[b-ow39x3997g]::before {
    background: linear-gradient(90deg, #4ecdc4, #44b3a8);
}

.summary-card.upload[b-ow39x3997g]::before {
    background: linear-gradient(90deg, #45b7d1, #3a9cc1);
}

.summary-card:hover[b-ow39x3997g] {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
    border-color: var(--primary-color);
}

.summary-card.active[b-ow39x3997g] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 1px rgba(var(--primary-color-rgb, 13, 110, 253), 0.2);
    background: linear-gradient(135deg, var(--card-background), var(--primary-color-light));
}

.summary-card-header[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
    flex-direction: row; /* Ensure desktop row layout */
}

.summary-card-title[b-ow39x3997g] {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-card-icon[b-ow39x3997g] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: white;
}

.summary-card.copy .summary-card-icon[b-ow39x3997g] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.summary-card.download .summary-card-icon[b-ow39x3997g] {
    background: linear-gradient(135deg, #4ecdc4, #44b3a8);
}

.summary-card.upload .summary-card-icon[b-ow39x3997g] {
    background: linear-gradient(135deg, #45b7d1, #3a9cc1);
}

/* Inline icon styling to preserve original icon appearance when inside title */
.summary-card-icon-inline[b-ow39x3997g] {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: white;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.summary-card.copy .summary-card-icon-inline[b-ow39x3997g] {
    background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}

.summary-card.download .summary-card-icon-inline[b-ow39x3997g] {
    background: linear-gradient(135deg, #4ecdc4, #44b3a8);
}

.summary-card.upload .summary-card-icon-inline[b-ow39x3997g] {
    background: linear-gradient(135deg, #45b7d1, #3a9cc1);
}

.summary-count[b-ow39x3997g] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.125rem;
    line-height: 1;
}

.summary-subtitle[b-ow39x3997g] {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 500;
    transition: all 0.2s ease;
}

/* Summary status row - contains subtitle and progress */
.summary-status-row[b-ow39x3997g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    min-height: 16px; /* Further reduced height */
    overflow: hidden;
}

/* Summary Action Button - for actions like remove completed */
.summary-action-btn[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: var(--danger-color);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.summary-action-btn:hover[b-ow39x3997g] {
    background: var(--danger-color-dark, #c82333);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.summary-action-btn i[b-ow39x3997g] {
    font-size: 0.65rem;
}

.summary-action-btn span[b-ow39x3997g] {
    font-size: 0.65rem;
    min-width: 1rem;
    text-align: center;
}
    
/* Active speed/status highlighting for summary cards - just text color, no background */
.summary-subtitle.active[b-ow39x3997g] {
    color: var(--success-color);
    font-weight: 600;
    font-size: 0.7rem; /* Keep same size */
}

.summary-subtitle.active.upload[b-ow39x3997g] {
    color: var(--primary-color);
}

.summary-subtitle.active.download[b-ow39x3997g] {
    color: var(--info-color, #17a2b8);
}

.summary-subtitle.active.copy[b-ow39x3997g] {
    color: var(--warning-color);
}

.summary-info span[b-ow39x3997g] {
    font-size: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.summary-status[b-ow39x3997g] {
    margin-top: 0.5rem;
}

.status-active[b-ow39x3997g] {
    color: var(--success-color);
    font-weight: 600;
}

.status-idle[b-ow39x3997g] {
    color: var(--text-muted);
}

.summary-icon[b-ow39x3997g] {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.5rem;
    color: var(--text-muted);
    opacity: 0.7;
}

/* Task Sections - Fill remaining space and handle internal scrolling */
.task-section[b-ow39x3997g] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    padding: 0.5rem;
    margin: 0; /* Remove all margins */
    display: flex;
    flex-direction: column;
    flex: 1; /* Fill remaining space */
    overflow: hidden; /* Prevent overflow from affecting page */
}

/* Upload Section Specific Layout - Fill space but reserve space for pagination */
.task-section.upload-section.modern-upload[b-ow39x3997g] {
    padding: 0;
    flex: 1; /* Fill remaining space */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin: 0; /* Remove all margins */
}

.section-header[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.section-header h2[b-ow39x3997g] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-actions[b-ow39x3997g] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Upload Header Improvements */
.upload-header[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color);
}

.upload-header .header-main[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.global-speed-indicator[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    background: var(--success-color);
    color: white;
    border-radius: 16px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Button Styles - Modern & Theme-Aware */
.btn[b-ow39x3997g] {
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: transparent;
    color: var(--text-primary);
    line-height: 1;
}

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

.btn-primary[b-ow39x3997g] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover:not(:disabled)[b-ow39x3997g] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.btn-outline-primary[b-ow39x3997g] {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.btn-outline-primary:hover:not(:disabled)[b-ow39x3997g] {
    background: var(--primary-color);
    color: white;
}

.btn-outline-secondary[b-ow39x3997g] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-outline-secondary:hover:not(:disabled)[b-ow39x3997g] {
    background: var(--bg-secondary);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.btn-outline-success[b-ow39x3997g] {
    background: transparent;
    color: var(--success-color);
    border-color: var(--success-color);
}

.btn-outline-success:hover:not(:disabled)[b-ow39x3997g] {
    background: var(--success-color);
    color: white;
}

.btn-outline-warning[b-ow39x3997g] {
    background: transparent;
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.btn-outline-warning:hover:not(:disabled)[b-ow39x3997g] {
    background: var(--warning-color);
    color: var(--dark-color);
}

.btn-outline-danger[b-ow39x3997g] {
    background: transparent;
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-outline-danger:hover:not(:disabled)[b-ow39x3997g] {
    background: var(--danger-color);
    color: white;
}

.btn-sm[b-ow39x3997g] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.btn-action[b-ow39x3997g] {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 6px;
}

.task-count[b-ow39x3997g] {
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.global-speed-indicator[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    background: var(--success-color);
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Global Progress Card - Performance Monitor Style */
.global-progress-card[b-ow39x3997g] {
    margin: 1.5rem;
    padding: 1.5rem;
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.progress-card-header[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.progress-card-header h3[b-ow39x3997g] {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-stats[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-size[b-ow39x3997g] {
    color: var(--text-secondary);
    font-weight: 500;
}

.progress-percentage[b-ow39x3997g] {
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.progress-bar-container[b-ow39x3997g] {
    position: relative;
}

.progress-bar.global[b-ow39x3997g] {
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar.global .progress-fill[b-ow39x3997g] {
    height: 100%;
    background: var(--primary-color);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.speed-display[b-ow39x3997g] {
    position: absolute;
    top: -0.5rem;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    background: var(--success-color);
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Compact Global Progress */
.global-progress-compact[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 0.75rem;
}

.progress-info[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
    flex: 1;
}

.progress-label[b-ow39x3997g] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.progress-stats[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.8rem;
}

.progress-size[b-ow39x3997g] {
    color: var(--text-secondary);
    white-space: nowrap;
}

.progress-percentage[b-ow39x3997g] {
    background: var(--primary-color);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.75rem;
    white-space: nowrap;
}

.progress-bar-container[b-ow39x3997g] {
    flex: 2;
    min-width: 100px;
}

.progress-bar.global[b-ow39x3997g] {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill[b-ow39x3997g] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--info-color));
    transition: width 0.3s ease;
}

/* Summary Card Progress */
.summary-progress[b-ow39x3997g] {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-color);
}

.progress-info-compact[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.progress-size-compact[b-ow39x3997g] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
}

.progress-percentage-compact[b-ow39x3997g] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--primary-color-light);
    padding: 0.125rem 0.375rem;
    border-radius: 10px;
}

.progress-bar-compact[b-ow39x3997g] {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar-compact .progress-fill[b-ow39x3997g] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #4dabf7);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Task Count Badge */
.task-count-badge[b-ow39x3997g] {
    background: var(--primary-color-light);
    color: var(--primary-color);
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.75rem;
}

/* Task List - Scroll internally within the task section */
.task-list[b-ow39x3997g] {
    flex: 1; /* Fill remaining space in task section */
    overflow-y: auto; /* Enable internal scrolling */
    min-height: 0; /* Allow flexbox shrinking */
}

.list-header[b-ow39x3997g] {
    padding: 1rem 1.5rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.select-all[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    margin: 0;
}

/* Task Lists */
.task-list[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Mobile Tab Selector - Hidden by default, only shown in mobile */
.mobile-tab-selector[b-ow39x3997g] {
    display: none !important;
}

/* Desktop title and Mobile header tab selector */
.desktop-title[b-ow39x3997g] {
    display: block;
}

/* Mobile tab selector header - only shown on mobile, hidden on desktop */
.mobile-tab-selector-header[b-ow39x3997g] {
    display: none; /* Hidden by default on desktop */
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.mobile-tab-dropdown[b-ow39x3997g] {
    flex: 1;
    min-width: 200px;
}

.mobile-tab-select[b-ow39x3997g] {
    width: 100%;
    padding: 0.6rem;
    padding-right: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    transition: all 0.2s ease;
}

.mobile-tab-select:focus[b-ow39x3997g] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

/* Ensure mobile tab selector is properly hidden on desktop */
@media (min-width: 769px) {
    .mobile-tab-selector-header[b-ow39x3997g] {
        display: none !important;
    }
}

.task-item[b-ow39x3997g] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem;
    transition: all 0.2s ease;
    margin-bottom: 0.5rem;
}

.task-item:hover[b-ow39x3997g] {
    border-color: var(--primary-color);
    background: var(--card-background);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.task-info[b-ow39x3997g] {
    flex: 1;
    min-width: 0;
}

.task-header[b-ow39x3997g] {
    margin-bottom: 0.5rem;
}

.task-header h4[b-ow39x3997g] {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    line-height: 1.2;
    word-break: break-word;
}

.task-meta[b-ow39x3997g] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.task-details[b-ow39x3997g] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.task-actions[b-ow39x3997g] {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
    margin-left: 1rem;
}

.task-actions .btn[b-ow39x3997g] {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
}

.task-details[b-ow39x3997g] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.task-details span[b-ow39x3997g] {
    display: block;
    margin-bottom: 0.25rem;
}

.task-error[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

.task-actions[b-ow39x3997g] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

/* Task Progress Bar */
.task-progress-bar[b-ow39x3997g] {
    margin-top: 0.75rem;
    width: 100%;
}

.progress-container[b-ow39x3997g] {
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.task-progress-bg[b-ow39x3997g] {
    height: 100%;
    background: linear-gradient(90deg, var(--success-color), var(--success-light));
    transition: width 0.3s ease;
}

.progress-info[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.progress-text[b-ow39x3997g] {
    font-weight: 600;
}

/* Download Speed Display */
.download-speed[b-ow39x3997g] {
    color: var(--success-color);
    font-weight: 600;
}

/* Status Classes */
.status-pending[b-ow39x3997g] {
    color: var(--warning-color);
}

.status-scanning[b-ow39x3997g], .status-running[b-ow39x3997g], .status-uploading[b-ow39x3997g] {
    color: var(--primary-color);
}

.status-completed[b-ow39x3997g] {
    color: var(--success-color);
}

.status-failed[b-ow39x3997g] {
    color: var(--danger-color);
}

.status-paused[b-ow39x3997g] {
    color: var(--warning-color);
}

.status-cancelled[b-ow39x3997g] {
    color: var(--text-muted);
}

/* Pagination */
.pagination[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    gap: 1rem;
    flex-wrap: wrap;
}

/* Modern Pagination - Compact */
.modern-pagination[b-ow39x3997g] {
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
    margin-top: auto;
}

/* Mobile sticky pagination */
@media (max-width: 768px) {
    .modern-pagination[b-ow39x3997g] {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        margin-top: 0;
        border-top: 2px solid var(--border-color);
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }
}

.modern-pagination .pagination-row[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modern-pagination .pagination-info[b-ow39x3997g] {
    font-size: 0.75rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.modern-pagination .pagination-controls[b-ow39x3997g] {
    display: flex;
    gap: 0.25rem;
    align-items: center;
}

.modern-pagination .page-btn[b-ow39x3997g] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-background);
    color: var(--text-primary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.1s ease; /* Reduced transition time to minimize timing conflicts */
    position: relative; /* Ensure proper stacking context */
}

/* CRITICAL: Completely disable hover effects on touch devices to prevent stuck highlights */
@media (hover: none) {
    .modern-pagination .page-btn:hover[b-ow39x3997g],
    .modern-pagination .page-btn.active:hover[b-ow39x3997g],
    .modern-pagination .page-btn:not(.active):hover[b-ow39x3997g] {
        all: unset !important;
    }
    
    /* Ensure touch devices still have proper button styling */
    .modern-pagination .page-btn[b-ow39x3997g] {
        padding: 0.3rem 0.6rem !important;
        border: 1px solid var(--border-color) !important;
        border-radius: 4px !important;
        background: var(--card-background) !important;
        color: var(--text-primary) !important;
        font-size: 0.8rem !important;
        cursor: pointer !important;
        transition: none !important; /* No transitions on touch devices */
        position: relative !important;
    }
    
    .modern-pagination .page-btn.active[b-ow39x3997g] {
        background: var(--primary-color) !important;
        color: white !important;
        border-color: var(--primary-color) !important;
    }
}

/* Only apply hover effects on devices that support hover (non-touch devices) */
@media (hover: hover) and (pointer: fine) {
    .modern-pagination .page-btn:hover[b-ow39x3997g] {
        background: var(--hover-background);
        border-color: var(--primary-color);
    }
    
    .modern-pagination .page-btn.active:hover[b-ow39x3997g] {
        background: var(--primary-color) !important;
        color: white !important;
        border-color: var(--primary-color) !important;
    }
    
    .modern-pagination .page-btn:not(.active):hover[b-ow39x3997g] {
        background: var(--primary-color) !important;
        color: white !important;
        border-color: var(--primary-color) !important;
    }
}

.modern-pagination .page-btn.active[b-ow39x3997g] {
    background: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
    z-index: 1; /* Ensure active button is always on top */
}

/* Ensure non-active buttons don't get active styling */
.modern-pagination .page-btn:not(.active)[b-ow39x3997g] {
    background: var(--card-background) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

.modern-pagination .items-per-page[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.modern-pagination .items-per-page select[b-ow39x3997g] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--card-background);
    color: var(--text-primary);
    font-size: 0.8rem;
}

.pagination-controls[b-ow39x3997g] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.pagination-info[b-ow39x3997g] {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.items-per-page[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.items-per-page select[b-ow39x3997g] {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--card-background);
    color: var(--text-primary);
    font-size: 0.8rem;
}

/* Mobile responsive pagination */
@media (max-width: 768px) {
    .modern-pagination .pagination-row[b-ow39x3997g] {
        gap: 0.15rem;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
    }
    
    .modern-pagination .pagination-info[b-ow39x3997g] {
        font-size: 0.6rem;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .modern-pagination .pagination-controls[b-ow39x3997g] {
        gap: 0.1rem;
        flex-shrink: 0;
    }
    
    .modern-pagination .page-btn[b-ow39x3997g] {
        padding: 0.15rem 0.3rem;
        font-size: 0.65rem;
        min-width: 20px;
    }
    
    .modern-pagination .items-per-page[b-ow39x3997g] {
        flex-shrink: 0;
    }
    
    .modern-pagination .items-per-page select[b-ow39x3997g] {
        padding: 0.15rem 0.3rem;
        font-size: 0.65rem;
        min-width: 35px;
    }
}

@media (max-width: 480px) {
    .modern-pagination .pagination-row[b-ow39x3997g] {
        gap: 0.25rem;
    }
    
    .modern-pagination .pagination-info[b-ow39x3997g] {
        font-size: 0.7rem;
    }
    
    .modern-pagination .items-per-page[b-ow39x3997g] {
        font-size: 0.7rem;
    }
    
    .modern-pagination .items-per-page select[b-ow39x3997g] {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
}

/* Empty State - Fill available space in task section */
.empty-state[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Center vertically */
    padding: 4rem 2rem;
    text-align: center;
    flex: 1; /* Fill remaining space in task section */
    min-height: 200px; /* Minimum for proper appearance */
}

.empty-state i[b-ow39x3997g] {
    font-size: 4rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state p[b-ow39x3997g] {
    color: var(--text-secondary);
    font-size: 1.1rem;
    margin: 0;
}

/* Button Styles */
.btn[b-ow39x3997g] {
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.btn:hover[b-ow39x3997g] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-sm[b-ow39x3997g] {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
}

.btn-primary[b-ow39x3997g] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover[b-ow39x3997g] {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary[b-ow39x3997g] {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-outline-primary:hover[b-ow39x3997g] {
    background: var(--primary-color);
    color: white;
}

.btn-outline-secondary[b-ow39x3997g] {
    border-color: var(--border-color);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover[b-ow39x3997g] {
    background: var(--bg-tertiary);
    border-color: var(--text-secondary);
    color: var(--text-primary);
}

.btn-outline-success[b-ow39x3997g] {
    border-color: var(--success-color);
    color: var(--success-color);
}

.btn-outline-success:hover[b-ow39x3997g] {
    background: var(--success-color);
    color: white;
}

.btn-outline-warning[b-ow39x3997g] {
    border-color: var(--warning-color);
    color: var(--warning-color);
}

.btn-outline-warning:hover[b-ow39x3997g] {
    background: var(--warning-color);
    color: white;
}

.btn-outline-danger[b-ow39x3997g] {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.btn-outline-danger:hover[b-ow39x3997g] {
    background: var(--danger-color);
    color: white;
}

/* Simple Checkbox Styling with Good Contrast */
input[type="checkbox"][b-ow39x3997g] {
    width: 16px;
    height: 16px;
    border: 2px solid var(--text-secondary);
    border-radius: 3px;
    background-color: var(--card-background);
    cursor: pointer;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    transition: all 0.2s ease;
}

input[type="checkbox"]:hover[b-ow39x3997g] {
    border-color: var(--primary-color);
    background-color: var(--primary-color-light);
}

input[type="checkbox"]:checked[b-ow39x3997g] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

input[type="checkbox"]:checked[b-ow39x3997g]::after {
    content: "✓";
    position: absolute;
    top: -2px;
    left: 1px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
}

input[type="checkbox"]:focus[b-ow39x3997g] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Modern Upload Task Styles */
.upload-header[b-ow39x3997g] {
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    border-bottom: 2px solid var(--primary-color);
}

.header-main[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.task-summary-info[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.task-count[b-ow39x3997g] {
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.global-speed-indicator[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.75rem;
    background: var(--success-color);
    color: white;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.btn-action[b-ow39x3997g] {
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.btn-action:hover[b-ow39x3997g] {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

/* Global Progress Card */
.global-progress-card[b-ow39x3997g] {
    margin: 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.progress-card-header[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.progress-card-header h3[b-ow39x3997g] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.progress-stats[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-size[b-ow39x3997g] {
    color: var(--text-secondary);
    font-weight: 500;
}

.progress-percentage[b-ow39x3997g] {
    padding: 0.25rem 0.75rem;
    background: var(--primary-color);
    color: white;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.9rem;
}

.progress-bar-container[b-ow39x3997g] {
    position: relative;
}

.progress-bar.global[b-ow39x3997g] {
    height: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar.global .progress-fill[b-ow39x3997g] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-light, #4dabf7));
    border-radius: 6px;
    transition: width 0.3s ease;
}

.speed-display[b-ow39x3997g] {
    position: absolute;
    top: -0.5rem;
    right: 0;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.5rem;
    background: var(--success-color);
    color: white;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Modern Upload Section Styles */
.modern-upload[b-ow39x3997g] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


/* Modern Copy Toolbar - Layout similar to Upload Toolbar */
.modern-copy-toolbar[b-ow39x3997g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem; /* tighter than before */
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
}

.modern-copy-toolbar .toolbar-left[b-ow39x3997g] { display: flex; align-items: center; gap: 0.35rem; }
.modern-copy-toolbar .toolbar-right[b-ow39x3997g] { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }

@media (min-width: 769px) {
    .modern-copy-toolbar[b-ow39x3997g] { padding: 0.3rem 0.6rem; }
}

/* Mobile layout for copy toolbar: left (select-all), right (actions) */
@media (max-width: 768px) {
    .modern-copy-toolbar[b-ow39x3997g] { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: 0.25rem 0.25rem; }
    .modern-copy-toolbar .toolbar-left[b-ow39x3997g] { display: flex !important; align-items: center; gap: 0.25rem; }
    .modern-copy-toolbar .toolbar-right[b-ow39x3997g] { display: flex; align-items: center; justify-self: end; gap: 0.375rem; }
    /* compact mobile buttons: icon-only */
    .modern-copy-toolbar .action-btn span[b-ow39x3997g] { display: none; }
}

/* Modern Upload Toolbar - Improved Layout */
.modern-upload-toolbar[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.375rem 0.5rem;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    flex-shrink: 0;
}

.modern-upload-toolbar .toolbar-main-row[b-ow39x3997g] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: nowrap;
    min-height: 40px;
}

.modern-upload-toolbar .toolbar-filters[b-ow39x3997g] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

/* Desktop-specific toolbar layout */
@media (min-width: 769px) {
    .modern-upload-toolbar[b-ow39x3997g] {
        padding: 0.375rem 0.75rem;
        flex-direction: row; /* desktop: single row */
        align-items: center;
        gap: 0.5rem;
        --toolbar-control-height: 36px; /* unify control height on desktop */
    }
    /* Place filters group to the left, then filename search, then actions on the right */
    .modern-upload-toolbar .toolbar-main-row[b-ow39x3997g] { display: none; }
    .modern-upload-toolbar .toolbar-filters[b-ow39x3997g] { display: flex !important; flex: 1 1 0; flex-wrap: nowrap; order: 0; margin-right: 0.5rem; margin-left: 0; }
    .filter-toggle[b-ow39x3997g] { display: none !important; }
    
    .toolbar-left[b-ow39x3997g] { display: none; }

    /* three-part layout: filters (left), search (center), actions (right) */
    .modern-upload-toolbar[b-ow39x3997g] { width: 100%; }
    .modern-upload-toolbar .toolbar-filters[b-ow39x3997g] { flex: 0 1 auto; }
    .modern-upload-toolbar .toolbar-center[b-ow39x3997g] { flex: 0 0 auto; min-width: 0; display: flex; justify-content: flex-start; gap: 0.5rem; flex-wrap: nowrap; }
    .modern-upload-toolbar .toolbar-right[b-ow39x3997g] { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; justify-content: flex-end; margin-left: auto; }

    .filter-group[b-ow39x3997g] { flex-wrap: nowrap; }
    /* Show labels for action buttons on desktop */
    .modern-upload-toolbar .action-btn span[b-ow39x3997g] { display: inline; }
    .modern-copy-toolbar .action-btn span[b-ow39x3997g] { display: inline; }

    /* Unify heights across controls on desktop */
    .modern-upload-toolbar .search-box input[b-ow39x3997g] { height: var(--toolbar-control-height); padding-top: 0; padding-bottom: 0; }
    .modern-upload-toolbar .filter-select[b-ow39x3997g] { height: var(--toolbar-control-height); padding-top: 0; padding-bottom: 0; }
    .modern-upload-toolbar .action-btn[b-ow39x3997g] { height: var(--toolbar-control-height); padding-top: 0; padding-bottom: 0; }
}

.toolbar-left[b-ow39x3997g] {
    display: none; /* Hide empty toolbar-left */
}

.toolbar-center[b-ow39x3997g] {
    flex: 1 1 480px; /* flexible by default */
    max-width: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap; /* allow inner controls to wrap */
}

.toolbar-right[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 0 0 auto;
}

/* Filter group added to upload toolbar */
.filter-group[b-ow39x3997g] {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: nowrap; /* keep single row on desktop */
}

.filter-select[b-ow39x3997g] {
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.85rem;
    flex: 0 0 auto; /* do not grow; keep compact */
    min-width: 120px;
    max-width: 180px; /* narrower to fit longer CJK labels */
}

/* Search inside filter group */
.filter-group .search-box[b-ow39x3997g] {
    max-width: 320px;
    flex: 1 1 200px; /* allow shrink more to make room */
}

.filter-select:focus[b-ow39x3997g] { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 13,110,253), 0.15); }

.search-box[b-ow39x3997g] {
    position: relative;
    width: 100%;
    max-width: 320px; /* give a bit more room on large screens */
    flex: 1 1 220px; /* shrink on tight spaces */
}

.filter-toggle[b-ow39x3997g] {
    display: none;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 18px;
    background: rgba(255,255,255,0.1);
    color: #fff;
    cursor: pointer;
}

.filter-toggle .filter-toggle-text[b-ow39x3997g] { font-size: 0.85rem; }
.filter-toggle .filter-dot[b-ow39x3997g] { width: 8px; height: 8px; border-radius: 50%; background: var(--warning-color); display: inline-block; }

.select-all-container[b-ow39x3997g] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.select-all-container input[type="checkbox"][b-ow39x3997g] {
    display: none;
}

.select-all-container label[b-ow39x3997g] { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 50%; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; }

.select-all-container label:hover[b-ow39x3997g] { background: var(--primary-color); border-color: var(--primary-color); color: #fff; transform: translateY(-1px); }

.select-all-container input[type="checkbox"]:checked + label[b-ow39x3997g] { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

.select-all-container label i[b-ow39x3997g] {
    font-size: 1.1rem;
}

/* Desktop: hide select-all only in UPLOAD toolbar (table header has one); keep it visible for COPY toolbar */
@media (min-width: 769px) {
    .modern-upload-toolbar .select-all-container[b-ow39x3997g] { display: none; }
    .modern-copy-toolbar .select-all-container[b-ow39x3997g] { display: flex; }
}

.search-box input[b-ow39x3997g] { width: 100%; padding: 0.5rem 2.25rem 0.5rem 2rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.95rem; transition: all 0.2s ease; }

.search-box input[b-ow39x3997g]::placeholder { color: var(--text-secondary); }

.search-box input:focus[b-ow39x3997g] { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 13,110,253), 0.15); }

.search-box i[b-ow39x3997g] { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 1rem; }

.clear-search[b-ow39x3997g] { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: var(--bg-secondary); border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; padding: 0.25rem; border-radius: 50%; transition: all 0.2s ease; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; }

.clear-search:hover[b-ow39x3997g] { color: #fff; background: var(--primary-color); border-color: var(--primary-color); }

.selection-info[b-ow39x3997g] { display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.9rem; padding: 0.4rem 0.75rem; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 8px; }

.bulk-actions[b-ow39x3997g], .global-actions[b-ow39x3997g] { display: flex; gap: 0.5rem; }

.action-btn[b-ow39x3997g] { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.9rem; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.9rem; cursor: pointer; transition: all 0.2s ease; }

.action-btn:hover[b-ow39x3997g] { background: var(--primary-color); border-color: var(--primary-color); color: #fff; transform: translateY(-1px); }

.action-btn.cancel:hover[b-ow39x3997g] { background: var(--danger-color); border-color: var(--danger-color); color: #fff; }
.action-btn.pause:hover[b-ow39x3997g] { background: var(--warning-color); border-color: var(--warning-color); color: #1b1b1b; }
.action-btn.resume:hover[b-ow39x3997g] { background: var(--success-color); border-color: var(--success-color); color: #fff; }

/* Modern Upload List */
.modern-upload-list[b-ow39x3997g] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.list-header[b-ow39x3997g] {
    background: var(--bg-tertiary);
    border-bottom: 2px solid var(--border-color);
    padding: 0;
    flex-shrink: 0;
}

.header-row[b-ow39x3997g] {
    display: grid;
    grid-template-columns: 45px 520px 200px 160px 130px;
    gap: 1.5rem;
    padding: 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Header column alignment */
.header-row .col-select[b-ow39x3997g] {
    justify-self: center;
}

.header-row .col-file[b-ow39x3997g] {
    justify-self: start;
}

.header-row .col-size[b-ow39x3997g] {
    justify-self: start;
}

.header-row .col-status[b-ow39x3997g] {
    justify-self: start;
}

.list-body[b-ow39x3997g] {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.upload-task-row[b-ow39x3997g] {
    display: grid;
    grid-template-columns: 45px 520px 200px 160px 130px;
    gap: 1.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.2s ease;
    position: relative;
    align-items: center;
}

/* Hide mobile elements on desktop */
.mobile-card-content[b-ow39x3997g] {
    display: none;
}

.upload-task-row[b-ow39x3997g]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: transparent;
    transition: all 0.2s ease;
}

.upload-task-row:last-child[b-ow39x3997g] {
    border-bottom: none;
}

.upload-task-row:hover[b-ow39x3997g] {
    background: var(--bg-secondary);
}

.upload-task-row.selected[b-ow39x3997g] {
    background: rgba(69, 183, 209, 0.05);
    border-color: rgba(69, 183, 209, 0.2);
}

.upload-task-row.selected[b-ow39x3997g]::before {
    background: var(--primary-color);
}

.upload-task-row.status-uploading[b-ow39x3997g]::before {
    background: var(--primary-color);
}

.upload-task-row.status-completed[b-ow39x3997g]::before {
    background: var(--success-color);
}

.upload-task-row.status-failed[b-ow39x3997g]::before {
    background: var(--danger-color);
}

.upload-task-row.status-paused[b-ow39x3997g]::before {
    background: var(--warning-color);
}

.upload-task-row.status-cancelled[b-ow39x3997g]::before {
    background: var(--text-muted);
}

/* Column Styles */
.col-select[b-ow39x3997g] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.col-file[b-ow39x3997g] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.col-size[b-ow39x3997g],
.col-status[b-ow39x3997g],
.col-speed[b-ow39x3997g] {
    display: flex;
    align-items: center;
    font-size: 0.9rem;
}

/* Operator Column */
.col-operator[b-ow39x3997g] {
    display: flex;
    align-items: center;
}

.operator-badge[b-ow39x3997g] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    border-radius: 12px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 0.8rem;
    white-space: nowrap;
}

.operator-badge i[b-ow39x3997g] {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.col-size[b-ow39x3997g] {
    justify-content: flex-start;
}

.col-speed[b-ow39x3997g] {
    justify-content: flex-end;
}

/* File Info */
.file-info[b-ow39x3997g] {
    display: flex;
    align-items: center;
    min-width: 0;
}

.file-details[b-ow39x3997g] {
    min-width: 0;
    flex: 1;
}

.file-error[b-ow39x3997g] {
    display: flex;
    align-items: flex-start;
    gap: 0.25rem;
    margin: 0.25rem 0;
    font-size: 0.75rem;
    color: var(--danger-color);
    flex-wrap: wrap;
}

.file-error .error-text[b-ow39x3997g] {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.3;
}

.file-name[b-ow39x3997g] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.125rem 0;
    white-space: normal !important;
    word-break: break-all;
    white-space: nowrap;
    max-width: 400px;
}

.file-path[b-ow39x3997g] {
    font-size: 0.8rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400px;
}

/* Size Column with Progress Background */
.size-with-progress[b-ow39x3997g] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    background: linear-gradient(
        90deg,
        rgba(var(--primary-color-rgb, 69, 183, 209), 0.1) 0%,
        rgba(var(--primary-color-rgb, 69, 183, 209), 0.1) var(--progress, 0%),
        transparent var(--progress, 0%),
        transparent 100%
    );
    border: 1px solid rgba(var(--primary-color-rgb, 69, 183, 209), 0.2);
    overflow: hidden;
    min-height: 2.5rem;
    box-sizing: border-box;
    justify-content: center;
    width: 100%;
}

.size-with-progress[b-ow39x3997g]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, 
        rgba(var(--primary-color-rgb, 69, 183, 209), 0.05),
        rgba(var(--primary-color-rgb, 69, 183, 209), 0.15)
    );
    transition: width 0.3s ease;
    pointer-events: none;
}

.size-text[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 500;
    position: relative;
    z-index: 1;
}

.size-transferred[b-ow39x3997g] {
    color: var(--primary-color);
    font-weight: 600;
}

.size-separator[b-ow39x3997g] {
    color: var(--text-muted);
}

.size-total[b-ow39x3997g] {
    color: var(--text-secondary);
}

.size-percentage[b-ow39x3997g] {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-color);
    position: relative;
    z-index: 1;
}

.size-unknown[b-ow39x3997g] {
    color: var(--text-muted);
    font-style: italic;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    min-height: 2.5rem;
    box-sizing: border-box;
    width: 100%;
}

/* Progress Column */
.progress-container[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    width: 100%;
}

.progress-bar[b-ow39x3997g] {
    height: 4px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.progress-fill[b-ow39x3997g] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #3a9cc1);
    border-radius: 2px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-fill[b-ow39x3997g]::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: shimmer 2s infinite;
}

.progress-text[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.transferred[b-ow39x3997g] {
    color: var(--text-secondary);
    font-weight: 500;
}

.percentage[b-ow39x3997g] {
    color: var(--primary-color);
    font-weight: 600;
}

.progress-unknown[b-ow39x3997g] {
    color: var(--text-muted);
}

/* Status Column */
.status-indicator[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.status-indicator.status-pending[b-ow39x3997g] {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.status-indicator.status-uploading[b-ow39x3997g] {
    background: rgba(69, 183, 209, 0.1);
    color: var(--primary-color);
}

.status-indicator.status-completed[b-ow39x3997g] {
    background: rgba(40, 167, 69, 0.1);
    color: var(--success-color);
}

.status-indicator.status-failed[b-ow39x3997g] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
}

.status-indicator.status-paused[b-ow39x3997g] {
    background: rgba(255, 193, 7, 0.1);
    color: var(--warning-color);
}

.status-indicator.status-cancelled[b-ow39x3997g] {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
}

.status-text[b-ow39x3997g] {
    display: inline;
}

.error-tooltip[b-ow39x3997g] {
    margin-left: 0.5rem;
    color: var(--danger-color);
    cursor: help;
    font-size: 0.9rem;
}

/* Speed Column */
.speed-value[b-ow39x3997g] {
    font-weight: 500;
    color: var(--success-color);
    font-size: 0.85rem;
}

.speed-idle[b-ow39x3997g] {
    color: var(--text-muted);
}

/* Error Row */
.error-row[b-ow39x3997g] {
    grid-column: 1 / -1;
    background: rgba(220, 53, 69, 0.05);
    border-top: 1px solid rgba(220, 53, 69, 0.1);
    margin: 0;
    width: calc(100% + 2rem);
    /* Break out of grid constraints to use full container width */
    margin-left: -1rem;
    margin-right: -1rem;
    position: relative;
    left: 0;
    right: 0;
}

.error-content[b-ow39x3997g] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--danger-color);
    font-size: 0.85rem;
    width: 100%;
    box-sizing: border-box;
    /* Ensure the content uses the full available width */
    min-width: 0;
    max-width: none;
}

.error-content i[b-ow39x3997g] {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.error-content span[b-ow39x3997g] {
    flex: 1;
    word-break: break-word;
    line-height: 1.4;
}

/* Inline progress for upload summary card */
.summary-progress-inline[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
    min-width: 0;
}

.progress-size-inline[b-ow39x3997g] {
    font-size: 0.6rem;
    color: var(--text-muted);
    font-weight: 500;
    white-space: nowrap;
}

.progress-percentage-inline[b-ow39x3997g] {
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.progress-bar-inline[b-ow39x3997g] {
    height: 3px;
    background: var(--border-color);
    border-radius: 2px;
    overflow: hidden;
    flex: 1;
    min-width: 30px;
}

.progress-bar-inline .progress-fill[b-ow39x3997g] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), #4dabf7);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Mobile-First Responsive Design */
@media (max-width: 1400px) {
    .header-row[b-ow39x3997g],
    .upload-task-row[b-ow39x3997g] {
        grid-template-columns: 42px 420px 180px 150px 120px;
        gap: 1.25rem;
    }
}

@media (max-width: 1200px) {
    .header-row[b-ow39x3997g],
    .upload-task-row[b-ow39x3997g] {
        grid-template-columns: 40px 320px 160px 140px 110px;
        gap: 1rem;
    }
    
    .status-text[b-ow39x3997g] {
        display: none;
    }
    
    .status-indicator[b-ow39x3997g] {
        justify-content: center;
        padding: 0.25rem 0.5rem;
    }
    
    .file-name[b-ow39x3997g] {
        font-size: 0.85rem;
    }
    
    .file-path[b-ow39x3997g] {
        font-size: 0.75rem;
    }
}

@media (max-width: 992px) {
    .header-row[b-ow39x3997g],
    .upload-task-row[b-ow39x3997g] {
        grid-template-columns: 35px 280px 0px 140px 95px;
        gap: 0.75rem;
    }
    /* hide operator column header content but preserve grid for alignment */
    .header-row .col-operator[b-ow39x3997g] { display: none; }
    .upload-task-row .col-operator[b-ow39x3997g] { display: none; }
    
    .col-speed[b-ow39x3997g] {
        display: none;
    }
    
    .progress-text[b-ow39x3997g] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.125rem;
        font-size: 0.7rem;
    }
    
    .status-indicator[b-ow39x3997g] {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 768px) {
    /* Mobile Layout - Page */
    .tasks-page[b-ow39x3997g] {
        padding: 0.25rem; /* Reduced from 0.75rem */
        /* Ensure enough space for dropdowns */
        min-height: 100vh;
    }
    
    /* Hide old mobile dropdown and desktop cards */
    .mobile-tab-selector[b-ow39x3997g] {
        display: none !important;
    }
    
    .task-summary[b-ow39x3997g] {
        display: none !important;
    }
    
    /* Show mobile tab selector in header, completely hide desktop title */
    .desktop-title[b-ow39x3997g] {
        display: none !important;
    }
    
    .mobile-tab-selector-header[b-ow39x3997g] {
        display: flex !important;
        /* Ensure proper stacking context for dropdown */
        position: relative;
        z-index: 1; /* Lower z-index for container */
    }
    
    /* Upload toolbar button text hiding */
    .modern-upload-toolbar .action-btn span[b-ow39x3997g] {
        display: none;
    }
    
    /* Center icons in mobile toolbars and use square icon buttons */
    .modern-upload-toolbar .action-btn[b-ow39x3997g],
    .modern-copy-toolbar .action-btn[b-ow39x3997g] {
        width: 36px;
        height: 36px;
        padding: 0;
        min-width: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0;
    }
    .modern-copy-toolbar .action-btn span[b-ow39x3997g] { display: none; }
    .modern-upload-toolbar .action-btn i[b-ow39x3997g],
    .modern-copy-toolbar .action-btn i[b-ow39x3997g] { line-height: 1; font-size: 1rem; }
    
    /* Mobile Layout - Compact Header */
    .page-header[b-ow39x3997g] {
        margin-bottom: 0.25rem; /* Reduced from 0.5rem */
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 0; /* Remove any default padding */
        /* Reduced z-index to not interfere with dropdown */
        position: relative;
        z-index: auto; /* Let dropdown manage its own stacking */
        /* Reduced min-height for tighter layout */
        min-height: 2.5rem; /* Reduced from 3rem */
    overflow-x: auto; /* enable horizontal scroll if content overflows */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
    scrollbar-width: thin;
    }
    
    .page-header-left[b-ow39x3997g] {
        flex: 1;
        display: flex;
        align-items: center;
    margin: 0; /* Remove any margins */
    white-space: nowrap; /* keep header items on single line */
    }
    
    .page-header-left h1[b-ow39x3997g] {
        font-size: 1.5rem;
        margin-bottom: 0;
    }
    
    .page-description[b-ow39x3997g] {
        display: none; /* Hide description on mobile to save space */
    }
    
    /* Mobile tab selector styling - simple form select approach */
    .mobile-tab-selector-header .mobile-tab-dropdown[b-ow39x3997g] {
        flex: 1;
        min-width: 200px;
    }
    
    .mobile-tab-selector-header .mobile-tab-select[b-ow39x3997g] {
        width: 100%;
        padding: 0.6rem;
        padding-right: 2.5rem;
        border: 1px solid var(--border-color);
        border-radius: 6px;
        background: var(--input-background);
        color: var(--text-primary);
        font-size: 0.875rem;
        font-weight: 500;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
        background-position: right 0.75rem center;
        background-repeat: no-repeat;
        background-size: 1.5em 1.5em;
        transition: all 0.2s ease;
    }
    
    .mobile-tab-selector-header .mobile-tab-select:focus[b-ow39x3997g] {
        outline: none;
        border-color: var(--primary-color);
        box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
    }
    
    .mobile-tab-selector-header .current-tab-status[b-ow39x3997g] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 70px;
        flex-shrink: 0;
    }
    
    .mobile-tab-selector-header .tab-status[b-ow39x3997g] {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--text-secondary);
        white-space: nowrap;
    }
    
    .mobile-tab-selector-header .tab-status.active[b-ow39x3997g] {
        color: var(--primary-color);
        font-weight: 600;
    }
    
    .mobile-tab-selector-header .tab-status.active.copy[b-ow39x3997g] {
        color: var(--info-color);
    }
    
    .mobile-tab-selector-header .tab-status.active.download[b-ow39x3997g] {
        color: var(--success-color);
    }
    
    .mobile-tab-selector-header .tab-status.active.upload[b-ow39x3997g] {
        color: var(--warning-color);
    }
    
    .page-header-right[b-ow39x3997g] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex-shrink: 0;
    white-space: nowrap;
    }
    
    .update-interval-selector[b-ow39x3997g] {
        font-size: 0.75rem;
        gap: 0.25rem;
    }
    
    .update-interval-selector label[b-ow39x3997g] {
        display: none; /* Hide label on mobile to save space */
    }
    
    .interval-select[b-ow39x3997g] {
        padding: 0.25rem 0.4rem;
        font-size: 0.75rem;
        min-width: 45px;
    }
    
    .refresh-control-btn[b-ow39x3997g] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
    
    .refresh-control-btn span[b-ow39x3997g] {
        display: none;
    }
    
    .page-header h1[b-ow39x3997g] {
        font-size: 1.75rem;
        margin-bottom: 0.125rem;
    }
    
    .page-description[b-ow39x3997g] {
        font-size: 0.875rem;
    }

    /* Switch to mobile card layout */
    .modern-upload-list[b-ow39x3997g] {
        margin: 0.25rem; /* Reduced from 0.5rem */
        border-radius: 6px;
    }
    
    .list-header[b-ow39x3997g] {
        display: none; /* Hide desktop header */
    }
    
    .list-body[b-ow39x3997g] {
        padding: 0;
    }
    
    .upload-task-row[b-ow39x3997g] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        border-bottom: 1px solid var(--border-color);
        border-radius: 0;
        background: var(--card-background);
    }
    
    .upload-task-row:last-child[b-ow39x3997g] {
        border-bottom: none;
    }
    
    .upload-task-row[b-ow39x3997g]::before {
        width: 100%;
        height: 3px;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
    }
    
    /* Hide desktop grid columns on mobile */
    .col-size[b-ow39x3997g],
    .col-status[b-ow39x3997g],
    .col-speed[b-ow39x3997g] {
        display: none;
    }
    
    /* Show mobile elements */
    .mobile-card-content[b-ow39x3997g] {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    
    /* Restructure layout for mobile cards - more compact */
    .upload-task-row[b-ow39x3997g] {
        display: block;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border-color);
        background: var(--card-background);
    }
    
    /* Mobile card header - reposition checkbox and file info */
    .upload-task-row .col-select[b-ow39x3997g],
    .upload-task-row .col-file[b-ow39x3997g] {
        display: flex;
    }
    
    /* Hide select-all label in mobile view since we use card layout */
    .col-file .select-all-label[b-ow39x3997g] {
        display: none;
    }
    
    .upload-task-row .col-select[b-ow39x3997g] {
        float: right;
        margin-bottom: 0.25rem;
    }
    
    .upload-task-row .col-file[b-ow39x3997g] {
        clear: both;
        margin-bottom: 0.5rem;
    }
    
    .file-name[b-ow39x3997g] {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.2;
        max-width: 280px;
    }
    
    .file-path[b-ow39x3997g] {
        font-size: 0.75rem;
        margin-top: 0.15rem;
        line-height: 1.1;
    }
    
    /* Mobile card body - more compact */
    .mobile-card-content[b-ow39x3997g] {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .mobile-stats[b-ow39x3997g] {
        display: flex;
        gap: 0.5rem;
        padding: 0.5rem;
        background: var(--bg-secondary);
        border-radius: 4px;
        font-size: 0.8rem;
    }
    
    .mobile-stat[b-ow39x3997g] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }
    
    .mobile-stat-label[b-ow39x3997g] {
        font-size: 0.7rem;
        color: var(--text-muted);
        text-transform: uppercase;
        letter-spacing: 0.3px;
        font-weight: 600;
    }
    
    .mobile-stat-value[b-ow39x3997g] {
        font-weight: 500;
        color: var(--text-primary);
        font-size: 0.8rem;
    }
    
    /* Special gradient stat for transferred/size showing progress */
    .mobile-stat-progress[b-ow39x3997g] {
        position: relative;
        padding: 0.4rem 0.6rem;
        border-radius: 4px;
        background: var(--bg-secondary); /* Use same background as mobile-stats container */
        overflow: hidden;
        min-height: 2.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 2; /* Take more space than regular stat */
        border: none; /* Remove border to blend with parent container */
    }
    
    .mobile-stat-progress[b-ow39x3997g]::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: var(--progress-width, 0%);
        background: linear-gradient(90deg, 
            rgba(var(--primary-color-rgb, 69, 183, 209), 0.3),
            rgba(var(--primary-color-rgb, 69, 183, 209), 0.2)
        );
        transition: width 0.3s ease;
        z-index: 0;
    }
    
    .mobile-stat-progress .mobile-stat-label[b-ow39x3997g],
    .mobile-stat-progress .mobile-stat-value[b-ow39x3997g] {
        position: relative;
        z-index: 1;
        color: var(--text-primary);
        text-shadow: none;
    }
    
    .mobile-stat-progress .mobile-stat-value[b-ow39x3997g] {
        font-weight: 600;
        font-size: 0.85rem;
    }
    
    /* Remove progress section since it's now integrated into the stat */
    .mobile-progress[b-ow39x3997g] {
        display: none;
    }
    
    /* Mobile status and actions - more compact */
    .mobile-status-actions[b-ow39x3997g] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 0.25rem;
    }
    
    .status-indicator[b-ow39x3997g] {
        padding: 0.25rem 0.5rem;
        border-radius: 12px;
        font-size: 0.7rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    .status-text[b-ow39x3997g] {
        display: inline;
    }
    
    /* Mobile Tab Dropdown - Now in header, old styles removed */

    /* Mobile Summary Cards - Compact Single Row Layout */
    .task-summary[b-ow39x3997g] {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        margin-bottom: 0.75rem;
        margin-left: 0;
        margin-right: 0;
    }
    
    .summary-card[b-ow39x3997g] {
        display: flex;
        align-items: center;
        padding: 0.5rem 0.75rem;
        border-radius: 8px;
        min-height: 42px; /* More compact height */
        height: 42px;
        margin-left: 0;
        margin-right: 0;
        background: var(--card-background);
        border: 1px solid var(--border-color);
        justify-content: space-between;
    }
    
    .summary-card-header[b-ow39x3997g] {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        margin-bottom: 0;
        margin-right: 0.5rem;
        flex-shrink: 0;
        gap: 0.5rem;
    }
    
    .summary-card-title[b-ow39x3997g] {
        font-size: 0.75rem;
        font-weight: 600;
        margin: 0;
        white-space: nowrap;
    }
    
    .summary-card-icon[b-ow39x3997g] {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .summary-count[b-ow39x3997g] {
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0 0.75rem 0 0;
        flex-shrink: 0;
    }
    
    .summary-status-row[b-ow39x3997g] {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        justify-content: flex-end;
    }
    
    .summary-subtitle[b-ow39x3997g] {
        font-size: 0.75rem;
        margin: 0;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    .summary-action-btn[b-ow39x3997g] {
        background: var(--danger-color);
        color: white;
        border: none;
        border-radius: 12px;
        padding: 0.25rem 0.5rem;
        font-size: 0.7rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    
    /* Mobile active subtitle styles - just text color */
    .summary-subtitle.active[b-ow39x3997g] {
        color: var(--success-color);
        font-weight: 600;
        font-size: 0.7rem; /* Keep same size */
    }
    
    .summary-subtitle.active.upload[b-ow39x3997g] {
        color: var(--primary-color);
    }
    
    .summary-subtitle.active.download[b-ow39x3997g] {
        color: var(--info-color, #17a2b8);
    }
    
    .summary-subtitle.active.copy[b-ow39x3997g] {
        color: var(--warning-color);
    }
    
    /* Hide inline progress on mobile for space */
    .summary-progress-inline[b-ow39x3997g] {
        display: none;
    }
    
    .summary-info span[b-ow39x3997g] {
        font-size: 0.8rem;
    }
    
    .summary-status[b-ow39x3997g] {
        margin: 0;
    }
    
    .summary-progress[b-ow39x3997g] {
        display: none; /* Hide progress on mobile pills for space */
    }
    
    /* Compact Summary Progress for Mobile */
    .summary-progress[b-ow39x3997g] {
        margin-top: 0.5rem;
        padding-top: 0.5rem;
    }
    
    .progress-info-compact[b-ow39x3997g] {
        margin-bottom: 0.375rem;
    }
    
    .progress-size-compact[b-ow39x3997g] {
        font-size: 0.7rem;
    }
    
    .progress-percentage-compact[b-ow39x3997g] {
        font-size: 0.7rem;
        padding: 0.125rem 0.25rem;
    }
    
    .progress-bar-compact[b-ow39x3997g] {
        height: 3px;
    }
    
    /* Mobile Upload Toolbar */
    /* Use grid to lock the first row (main + actions) and the second row (filters) */
    .modern-upload-toolbar[b-ow39x3997g] { display: grid; grid-template-columns: max-content 1fr; grid-template-rows: auto auto; align-items: center; padding: 0.35rem 0.5rem; gap: 0.25rem 0.25rem; }
    .modern-upload-toolbar .toolbar-main-row[b-ow39x3997g] { grid-column: 1; grid-row: 1; min-height: 32px; min-width: 0; width: max-content; display: flex; align-items: center; gap: 0.35rem; flex-wrap: nowrap; overflow: visible; position: relative; z-index: 1; }
    /* Ensure action buttons sit on the first row, right side */
    .modern-upload-toolbar .toolbar-right[b-ow39x3997g] { grid-column: 2; grid-row: 1; justify-self: end; }
    /* keep filters collapsed by default, open when toggled */
    .modern-upload-toolbar .toolbar-filters[b-ow39x3997g] { grid-column: 1 / -1; grid-row: 2; display: none; width: 100%; position: relative; z-index: 0; }
    /* When open, render filters as a 2-row grid: search on row 1, selects on row 2 */
    .modern-upload-toolbar .toolbar-filters.open[b-ow39x3997g] { display: block; padding: 0.25rem 0.25rem 0.25rem 0; width: 100%; }
    .modern-upload-toolbar .toolbar-filters.open .filter-group[b-ow39x3997g] { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 0.5rem; width: 100%; }
    .modern-upload-toolbar .toolbar-filters.open .filter-group .search-box[b-ow39x3997g] { grid-column: 1 / -1; width: 100%; max-width: 100%; }
    .modern-upload-toolbar .toolbar-filters.open .filter-group .filter-select[b-ow39x3997g] { width: 100%; min-width: 0; max-width: 100%; flex: 1 1 auto; }
    .filter-toggle[b-ow39x3997g] { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 0.5rem; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); min-width: 88px; }
    
    .toolbar-left[b-ow39x3997g] {
        display: none; /* Keep hidden on mobile */
    }
    
    .toolbar-center[b-ow39x3997g] {
        flex: 1 1 100%;
        min-width: 140px;
        max-width: none;
        margin: 0 0.5rem;
        gap: 0.5rem;
    }
    /* Ensure upload toolbar checkbox area doesn’t expand and create a big gap */
    .modern-upload-toolbar .toolbar-center[b-ow39x3997g] { flex: 0 0 auto; min-width: 0; margin: 0; gap: 0; }
    
    .search-box[b-ow39x3997g] {
        max-width: none; /* let it take available width */
        flex: 1 1 60%;
    }

    .filter-group[b-ow39x3997g] { gap: 0.4rem; flex-wrap: nowrap; }

    .filter-select[b-ow39x3997g] { padding: 0.35rem 0.5rem; font-size: 0.85rem; flex: 0 0 auto; }
    .filter-group .search-box[b-ow39x3997g] { flex: 0 0 60%; min-width: 160px; }
    
    .search-box input[b-ow39x3997g] {
        padding: 0.5rem 2.5rem 0.5rem 2rem;
        font-size: 0.85rem;
    }
    
    .search-box i[b-ow39x3997g] {
        left: 0.75rem;
        font-size: 0.9rem;
    }
    
    .select-all-container label[b-ow39x3997g] {
        width: 2rem;
        height: 2rem;
    }
    
    .select-all-container label i[b-ow39x3997g] {
        font-size: 1rem;
    }
    
    .toolbar-right[b-ow39x3997g] { grid-column: 2; grid-row: 1; justify-self: end; min-width: 0; gap: 0.35rem; flex-wrap: nowrap; justify-content: flex-end; overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
    
    .clear-search[b-ow39x3997g] {
        right: 0.5rem;
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
        padding: 0.25rem;
    }
    
    .selection-info[b-ow39x3997g] {
        display: none; /* Hide on mobile for space */
    }
    
    .bulk-actions[b-ow39x3997g] {
        display: flex;
        gap: 0.375rem;
    }
    
    .global-actions[b-ow39x3997g] {
        display: flex;
        gap: 0.375rem;
    }
    
    .action-btn[b-ow39x3997g] { padding: 0.35rem; min-width: 32px; height: 32px; border-radius: 8px; font-size: 0.9rem; }
    
    .action-btn:hover[b-ow39x3997g] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    .action-btn span[b-ow39x3997g] {
        display: none; /* Hide text, show only icons */
    }
}

@media (max-width: 480px) {
    .tasks-page[b-ow39x3997g] {
        padding: 0.5rem;
    }
    
    /* Even more compact on smaller screens but keep single row */
    .page-header[b-ow39x3997g] {
        margin-bottom: 0.5rem;
        gap: 0.75rem;
    }
    
    .page-header-left h1[b-ow39x3997g] {
        font-size: 1.3rem;
    }
    
    .page-header-right[b-ow39x3997g] {
        gap: 0.4rem;
    }
    
    .interval-select[b-ow39x3997g] {
        padding: 0.2rem 0.3rem;
        font-size: 0.7rem;
        min-width: 40px;
    }
    
    .refresh-control-btn[b-ow39x3997g] {
        padding: 0.2rem 0.4rem;
        font-size: 0.7rem;
    }
    
    .mobile-tab-selector[b-ow39x3997g] {
        padding: 0.5rem;
        gap: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    .tab-dropdown[b-ow39x3997g] {
        padding: 0.4rem;
        font-size: 0.75rem;
        padding-right: 1.8rem;
        background-size: 1em 1em;
        background-position: right 0.4rem center;
    }
    
    .current-tab-status[b-ow39x3997g] {
        min-width: 60px;
    }
    
    .tab-status[b-ow39x3997g] {
        font-size: 0.75rem;
    }
    
    .modern-upload-list[b-ow39x3997g] {
        margin: 0;
        border-radius: 8px;
    }
    
    .upload-task-row[b-ow39x3997g] {
        padding: 0.75rem;
        gap: 0.5rem;
    }
    
    .file-info[b-ow39x3997g] {
        gap: 0;
    }
    
    .btn[b-ow39x3997g] {
        padding: 0.375rem 0.75rem;
        font-size: 0.8rem;
    }
    
    .btn-sm[b-ow39x3997g] {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .summary-card[b-ow39x3997g],
    .task-item[b-ow39x3997g],
    .btn[b-ow39x3997g],
    .progress-bar[b-ow39x3997g],
    .progress-fill[b-ow39x3997g],
    .progress-fill-modern[b-ow39x3997g] {
        transition: none;
    }
    
    .summary-card:hover[b-ow39x3997g],
    .btn:hover[b-ow39x3997g] {
        transform: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .summary-card[b-ow39x3997g],
    .task-section[b-ow39x3997g],
    .task-item[b-ow39x3997g],
    .upload-task-item[b-ow39x3997g],
    .upload-controls-card[b-ow39x3997g] {
        border-width: 2px;
    }
}

/* Focus styles for better accessibility */
.summary-card:focus[b-ow39x3997g],
.btn:focus[b-ow39x3997g],
.task-item:focus[b-ow39x3997g],
.upload-task-item:focus[b-ow39x3997g] {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.filter-input:focus[b-ow39x3997g],
select:focus[b-ow39x3997g] {
    outline: 2px solid var(--primary-color);
    outline-offset: 1px;
}

/* Loading animation */
@keyframes spin-b-ow39x3997g {
    to { transform: rotate(360deg); }
}

.fa-spin[b-ow39x3997g] {
    animation: spin-b-ow39x3997g 1s linear infinite;
}

.col-file[b-ow39x3997g] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.col-file .select-all-label[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

.col-file .select-all-label .checkmark[b-ow39x3997g] {
    width: 16px;
    height: 16px;
}

.col-file .select-all-label .label[b-ow39x3997g] {
    font-weight: 500;
}

/* ====================================
   COMPACT COPY TASKS LIST
   ==================================== */

.copy-section.modern-copy[b-ow39x3997g] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0;
    margin-bottom: 0; /* Remove bottom margin to prevent overflow */
    overflow: hidden;
}

/* Mobile Action Bar removed (moved into toolbar) */

.modern-section-header[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, var(--card-background), var(--bg-secondary));
    flex-shrink: 0;
}

.section-header-main[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 2rem;
}

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

.section-title i[b-ow39x3997g] {
    color: var(--primary-color);
    font-size: 1.25rem;
}

.section-title h2[b-ow39x3997g] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.section-summary[b-ow39x3997g] {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.summary-item[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.summary-label[b-ow39x3997g] {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value[b-ow39x3997g] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Compact Copy Tasks List - Fill available space and scroll internally */
.copy-tasks-compact-list[b-ow39x3997g] {
    padding: 0.1rem; /* tighter */
    display: flex;
    flex-direction: column;
    gap: 0.1rem; /* tighter */
    flex: 1; /* Fill remaining space in task section */
    overflow-y: auto; /* Enable internal scrolling */
    min-height: 0; /* Allow flexbox shrinking */
}

/* Compact Download Tasks List - Fill available space and scroll internally */
.download-tasks-compact-list[b-ow39x3997g] {
    padding: 0.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1; /* Fill remaining space in task section */
    overflow-y: auto; /* Enable internal scrolling */
    min-height: 0; /* Allow flexbox shrinking */
}

.copy-task-compact[b-ow39x3997g], .download-task-compact[b-ow39x3997g] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px; /* slightly smoother */
    padding: 0.4rem; /* tighter */
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: 0.35rem; /* tighter */
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.05));
}

.copy-task-compact[b-ow39x3997g]::before, .download-task-compact[b-ow39x3997g]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px; /* slimmer accent */
    background: transparent;
    transition: all 0.2s ease;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.copy-task-compact:hover[b-ow39x3997g]::before, .download-task-compact:hover[b-ow39x3997g]::before {
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light));
}

.copy-task-compact:hover[b-ow39x3997g], .download-task-compact:hover[b-ow39x3997g] {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color);
}

.copy-task-compact.status-running[b-ow39x3997g]::before, .download-task-compact.status-running[b-ow39x3997g]::before {
    background: linear-gradient(90deg, var(--warning-color), #ffc107);
}

.copy-task-compact.status-completed[b-ow39x3997g]::before {
    background: linear-gradient(90deg, var(--success-color), #198754);
}

.copy-task-compact.status-failed[b-ow39x3997g]::before {
    background: linear-gradient(90deg, var(--danger-color), #dc3545);
}

.copy-task-compact.status-pending[b-ow39x3997g]::before {
    background: linear-gradient(90deg, var(--info-color), #0dcaf0);
}

/* Selection state for copy tasks */
.copy-task-compact.selected[b-ow39x3997g] {
    background: rgba(255, 107, 107, 0.05); /* subtle tint similar to copy theme */
    border-color: rgba(255, 107, 107, 0.2);
}
.copy-task-compact.selected[b-ow39x3997g]::before {
    background: var(--warning-color);
}

.download-task-compact.status-idle[b-ow39x3997g]::before {
    background: linear-gradient(90deg, var(--text-muted), #6c757d);
}

/* Task Main Info */
.task-main-info[b-ow39x3997g] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.35rem; /* tighter */
}

.task-title[b-ow39x3997g] {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.task-title .title-left[b-ow39x3997g] {
    display: flex;
    align-items: center;
}

.task-title .title-right[b-ow39x3997g] {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* badges to the right */
    gap: 0.5rem;
}

/* Checkbox inside task-title */
.task-title .title-select[b-ow39x3997g] {
    display: inline-flex;
    align-items: center;
}
.task-title .title-select input[type="checkbox"][b-ow39x3997g] {
    margin-right: 0.15rem;
}

.operation-badge-compact[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--primary-color);
    color: white;
    padding: 0.15rem 0.45rem; /* tighter */
    border-radius: 10px;
    font-size: 0.65rem; /* smaller */
    font-weight: 600;
}

.operation-badge-compact i[b-ow39x3997g] { font-size: 0.65rem; }

.status-badge-compact[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.45rem; /* tighter */
    border-radius: 10px;
    font-size: 0.65rem; /* smaller */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

.status-badge-compact.status-pending[b-ow39x3997g] {
    background: rgba(13, 202, 240, 0.1);
    color: var(--info-color);
    border: 1px solid rgba(13, 202, 240, 0.3);
}

.status-badge-compact.status-running[b-ow39x3997g] {
    background: rgba(255, 193, 7, 0.1);
    color: var(--warning-color);
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-badge-compact.status-completed[b-ow39x3997g] {
    background: rgba(25, 135, 84, 0.1);
    color: var(--success-color);
    border: 1px solid rgba(25, 135, 84, 0.3);
}

.status-badge-compact.status-failed[b-ow39x3997g] {
    background: rgba(220, 53, 69, 0.1);
    color: var(--danger-color);
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Paused badge in header (title-right) */
.paused-badge-compact[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    background: rgba(255, 193, 7, 0.12);
    color: var(--warning-color);
    border: 1px solid rgba(255, 193, 7, 0.35);
}
.paused-badge-compact i[b-ow39x3997g] { font-size: 0.65rem; }

/* Progress Compact */
.progress-compact[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.35rem;
}

.progress-bar-compact[b-ow39x3997g] {
    flex: 1;
    height: 3px; /* slimmer */
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
}

.progress-fill-compact[b-ow39x3997g] {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light));
    transition: width 0.3s ease;
    border-radius: 2px;
}

.progress-text-compact[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.68rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.progress-text-compact span:first-child[b-ow39x3997g] {
    font-weight: 600;
    color: var(--text-primary);
}

/* Task Details Compact */
.task-details-compact[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.35rem; /* tighter */
}

.detail-row-compact[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
}

.detail-label-compact[b-ow39x3997g] {
    color: var(--text-muted);
    font-weight: 500;
    min-width: 64px; /* narrower */
}

.detail-value-compact[b-ow39x3997g] {
    color: var(--text-primary);
    font-weight: 500;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-row-compact:last-child[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.detail-item-compact[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.68rem; /* smaller */
    color: var(--text-secondary);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
}

.detail-item-compact i[b-ow39x3997g] {
    font-size: 0.65rem;
    min-width: 10px;
    text-align: center;
}

.detail-item-compact.paused[b-ow39x3997g] {
    color: var(--warning-color);
}

/* Avoid duplicate paused indicator: hide detail paused on desktop if header badge is visible */
@media (min-width: 769px) {
    .detail-row-compact .detail-item-compact.paused[b-ow39x3997g] {
        display: none;
    }
}

.detail-item-compact.error[b-ow39x3997g] {
    color: var(--danger-color);
}

.detail-item-compact .text-success[b-ow39x3997g] {
    color: var(--success-color) !important;
}

/* Task Actions Compact */
/* Per-task action buttons removed for copy tasks */
.task-actions-compact[b-ow39x3997g] { display: none; }
.action-btn-compact[b-ow39x3997g] {
    width: 28px;
    height: 28px;
    border: 1px solid;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.action-btn-compact:hover[b-ow39x3997g] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.action-btn-compact.pause[b-ow39x3997g] {
    color: var(--warning-color);
    border-color: var(--warning-color);
}

.action-btn-compact.pause:hover[b-ow39x3997g] {
    background: var(--warning-color);
    color: white;
}

.action-btn-compact.restart[b-ow39x3997g] {
    color: var(--success-color);
    border-color: var(--success-color);
}

.action-btn-compact.restart:hover[b-ow39x3997g] {
    background: var(--success-color);
    color: white;
}

.action-btn-compact.cancel[b-ow39x3997g] {
    color: var(--danger-color);
    border-color: var(--danger-color);
}

.action-btn-compact.cancel:hover[b-ow39x3997g] {
    background: var(--danger-color);
    color: white;
}

/* Error Message Compact */
.error-message-compact[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(220, 53, 69, 0.05);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

/* Error List Compact */
.error-list-compact[b-ow39x3997g] {
    margin-top: 0.5rem;
    border: 1px solid rgba(220, 53, 69, 0.2);
    border-radius: 4px;
    background: rgba(220, 53, 69, 0.02);
    overflow: hidden;
}

.error-list-header[b-ow39x3997g] {
    background: rgba(220, 53, 69, 0.1);
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(220, 53, 69, 0.2);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--danger-color);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    transition: background-color 0.2s ease;
    user-select: none;
}

.error-list-header:hover[b-ow39x3997g] {
    background: rgba(220, 53, 69, 0.15);
}

.error-expand-btn[b-ow39x3997g] {
    background: none;
    border: none;
    color: var(--danger-color);
    font-size: 0.65rem;
    cursor: pointer;
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
    transition: all 0.2s ease;
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-expand-btn:hover[b-ow39x3997g] {
    background: rgba(220, 53, 69, 0.2);
}

.error-expand-btn:focus[b-ow39x3997g] {
    outline: none;
    box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.5);
}

.error-list-container[b-ow39x3997g] {
    max-height: 120px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(220, 53, 69, 0.3) transparent;
}

.error-list-container[b-ow39x3997g]::-webkit-scrollbar {
    width: 4px;
}

.error-list-container[b-ow39x3997g]::-webkit-scrollbar-track {
    background: transparent;
}

.error-list-container[b-ow39x3997g]::-webkit-scrollbar-thumb {
    background: rgba(220, 53, 69, 0.3);
    border-radius: 2px;
}

.error-list-container[b-ow39x3997g]::-webkit-scrollbar-thumb:hover {
    background: rgba(220, 53, 69, 0.5);
}

.error-item[b-ow39x3997g] {
    padding: 0.4rem 0.6rem;
    border-bottom: 1px solid rgba(220, 53, 69, 0.1);
    font-size: 0.7rem;
}

.error-item:last-child[b-ow39x3997g] {
    border-bottom: none;
}

.error-time[b-ow39x3997g] {
    font-size: 0.65rem;
    color: var(--text-secondary);
    margin-bottom: 0.2rem;
    font-weight: 500;
}

.error-message[b-ow39x3997g] {
    color: var(--danger-color);
    line-height: 1.3;
    word-wrap: break-word;
    margin: 0;
    border-radius: 4px;
    padding: 0.4rem;
    font-size: 0.7rem;
    color: var(--danger-color);
    margin-top: 0.5rem;
}

.error-message-compact i[b-ow39x3997g] {
    font-size: 0.65rem;
}

.empty-state.modern-empty[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--bg-secondary);
    border-radius: 12px;
    margin: 1rem;
}

.empty-icon[b-ow39x3997g] {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.empty-icon i[b-ow39x3997g] {
    font-size: 2rem;
    color: white;
}

.empty-content h3[b-ow39x3997g] {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.empty-content p[b-ow39x3997g] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Progress Statistics - Mobile Wrappable */
.detail-row-compact.progress-stats[b-ow39x3997g] {
    display: flex;
    align-items: flex-start;
    gap: 0.3rem;
    flex-wrap: wrap;
    font-size: 0.75rem;
    max-width: 100%;
    overflow: hidden;
}

.detail-row-compact.progress-stats .detail-item-compact[b-ow39x3997g] {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
    flex: 0 0 auto;
    min-width: 0;
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .modern-section-header[b-ow39x3997g] {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
        padding: 1rem;
    }

    .section-header-main[b-ow39x3997g] {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .section-summary[b-ow39x3997g] {
        width: 100%;
        justify-content: space-around;
    }

    .copy-tasks-compact-list[b-ow39x3997g] { padding: 0.4rem; }

    .copy-task-compact[b-ow39x3997g] { padding: 0.45rem; }

    .task-main-info[b-ow39x3997g] { flex-direction: column; gap: 0.4rem; align-items: flex-start; }

    .task-title[b-ow39x3997g] {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 0.4rem;
        width: 100%;
    }

    .progress-compact[b-ow39x3997g] { flex-direction: column; gap: 0.4rem; }

    .progress-text-compact[b-ow39x3997g] {
        justify-content: space-between;
        width: 100%;
    }

    .detail-row-compact:last-child[b-ow39x3997g] { flex-direction: column; gap: 0.4rem; align-items: flex-start; }

    .detail-row-compact.progress-stats[b-ow39x3997g] {
        flex-direction: row;
        gap: 0.25rem;
        flex-wrap: wrap;
        max-width: 100%;
        overflow: hidden;
    }

    .detail-row-compact.progress-stats .detail-item-compact[b-ow39x3997g] {
        font-size: 0.62rem;
        margin-bottom: 0.15rem;
        flex: 0 0 auto;
        max-width: calc(33.33% - 0.2rem);
        white-space: normal;
        word-break: break-all;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* General mobile text wrapping for all detail items */
    .detail-item-compact[b-ow39x3997g] { white-space: normal; word-break: break-word; overflow-wrap: break-word; max-width: 100%; }

    .task-actions-compact[b-ow39x3997g] {
        width: 100%;
        justify-content: center;
    }

    .action-btn-compact[b-ow39x3997g] { flex: 1; max-width: 80px; }
}

@media (max-width: 480px) {
    .copy-task-compact[b-ow39x3997g] {
        padding: 0.4rem;
    }

    .operation-badge-compact[b-ow39x3997g],
    .status-badge-compact[b-ow39x3997g] {
        font-size: 0.7rem;
        padding: 0.25rem 0.5rem;
    }

    .detail-label-compact[b-ow39x3997g] {
        min-width: 70px;
        font-size: 0.75rem;
    }

    .detail-value-compact[b-ow39x3997g] {
        font-size: 0.75rem;
    }

    /* Extra aggressive wrapping for very small screens */
    .detail-row-compact.progress-stats[b-ow39x3997g] {
        gap: 0.2rem;
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-row-compact.progress-stats .detail-item-compact[b-ow39x3997g] {
        font-size: 0.6rem;
        max-width: 100%;
        width: 100%;
        margin-bottom: 0.15rem;
        line-height: 1.2;
        word-break: break-all;
        overflow-wrap: anywhere;
        hyphens: auto;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .action-btn-compact[b-ow39x3997g] {
        width: 32px;
        height: 32px;
    }
}

/* Dark Theme Enhancements - use data-theme attribute only */
:root[data-theme="dark"] .copy-task-compact[b-ow39x3997g] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

:root[data-theme="dark"] .copy-task-compact:hover[b-ow39x3997g] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .error-message-compact[b-ow39x3997g] {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.3);
}

/* Accessibility Improvements */
@media (prefers-reduced-motion: reduce) {
    .copy-task-compact[b-ow39x3997g],
    .action-btn-compact[b-ow39x3997g],
    .progress-fill-compact[b-ow39x3997g] {
        transition: none;
    }

    .copy-task-compact:hover[b-ow39x3997g],
    .action-btn-compact:hover[b-ow39x3997g] {
        transform: none;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    .copy-task-compact[b-ow39x3997g] {
        border: 2px solid var(--text-primary);
    }

    .operation-badge-compact[b-ow39x3997g],
    .status-badge-compact[b-ow39x3997g] {
        border: 2px solid currentColor;
    }

    .action-btn-compact[b-ow39x3997g] {
        border: 2px solid currentColor;
    }
}

/* Download Tasks Responsive Layout */
.download-tasks-table-desktop[b-ow39x3997g] {
    display: block;
    max-height: 75vh;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

.download-tasks-compact-list[b-ow39x3997g] {
    display: none;
}

.download-tasks-table-desktop .table[b-ow39x3997g] {
    width: 100%;
    max-width: 100%;
    background-color: var(--card-background);
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: fixed;
    box-sizing: border-box;
    overflow: hidden;
}

.download-tasks-table-desktop .table thead[b-ow39x3997g] {
    background: var(--bg-secondary);
}

.download-tasks-table-desktop .table tbody[b-ow39x3997g] {
    background: var(--card-background);
}

.download-tasks-table-desktop .table tbody tr[b-ow39x3997g] {
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease;
}

.download-tasks-table-desktop .table tbody tr:hover[b-ow39x3997g] {
    background-color: var(--hover-bg);
}

.download-tasks-table-desktop .table thead th[b-ow39x3997g] {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-weight: 600;
    padding: 1rem 0.75rem;
    border-bottom: 2px solid var(--border-color);
    font-size: 0.85rem;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
}

.download-tasks-table-desktop .table tbody td[b-ow39x3997g] {
    padding: 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.88rem;
    color: var(--text-secondary);
    box-sizing: border-box;
}

/* Header text alignment */
.download-tasks-table-desktop .table thead th:nth-child(2)[b-ow39x3997g],
.download-tasks-table-desktop .table thead th:nth-child(3)[b-ow39x3997g],
.download-tasks-table-desktop .table thead th:nth-child(4)[b-ow39x3997g] {
    text-align: right;
}

.download-tasks-table-desktop .table thead th:nth-child(5)[b-ow39x3997g] {
    text-align: center;
}

.download-tasks-table-desktop .table tbody td:first-child[b-ow39x3997g] {
    font-weight: 500;
    color: var(--text-primary);
}

.download-tasks-table-desktop .table tbody tr:last-child td[b-ow39x3997g] {
    border-bottom: none;
}

/* Column widths */
.download-tasks-table-desktop .table th:nth-child(1)[b-ow39x3997g],
.download-tasks-table-desktop .table td:nth-child(1)[b-ow39x3997g] { width: 65%; max-width: 65%; } /* File */
.download-tasks-table-desktop .table th:nth-child(2)[b-ow39x3997g],
.download-tasks-table-desktop .table td:nth-child(2)[b-ow39x3997g] { width: 10%; max-width: 10%; } /* Size */
.download-tasks-table-desktop .table th:nth-child(3)[b-ow39x3997g],
.download-tasks-table-desktop .table td:nth-child(3)[b-ow39x3997g] { width: 10%; max-width: 10%; } /* Buffer */
.download-tasks-table-desktop .table th:nth-child(4)[b-ow39x3997g],
.download-tasks-table-desktop .table td:nth-child(4)[b-ow39x3997g] { width: 10%; max-width: 10%; } /* Speed */
.download-tasks-table-desktop .table th:nth-child(5)[b-ow39x3997g],
.download-tasks-table-desktop .table td:nth-child(5)[b-ow39x3997g] { width: 5%; max-width: 5%; } /* Threads */

.download-task-row.status-running[b-ow39x3997g] {
    background-color: rgba(40, 167, 69, 0.02);
    border-left: 3px solid var(--success-color);
}

.download-task-row.status-idle[b-ow39x3997g] {
    background-color: rgba(108, 117, 125, 0.02);
    border-left: 3px solid var(--text-muted);
}

.download-task-row.status-running:hover[b-ow39x3997g] {
    background-color: rgba(40, 167, 69, 0.05);
}

.download-task-row.status-idle:hover[b-ow39x3997g] {
    background-color: rgba(108, 117, 125, 0.05);
}

/* File Cell */
.file-cell[b-ow39x3997g] {
    padding: 0.5rem !important;
    min-width: 0;
    width: 65%;
    max-width: 65%;
    vertical-align: top;
    box-sizing: border-box;
}

.file-cell .file-info[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.file-cell .file-name[b-ow39x3997g] {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.85rem;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.3;
    display: block;
    min-width: 0;
    box-sizing: border-box;
    flex-shrink: 1;
    text-align: left;
}

.file-cell .file-processes[b-ow39x3997g] {
    display: flex;
    flex-direction: column;
    gap: 0.03rem;
    margin-top: 0.08rem;
    max-height: 35px;
    overflow-y: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.file-cell .process-item[b-ow39x3997g] {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    font-size: 0.65rem;
    color: var(--text-secondary);
    padding: 0.02rem 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.file-cell .process-item i[b-ow39x3997g] {
    color: var(--primary-color);
    font-size: 0.6rem;
    flex-shrink: 0;
}

.file-cell .process-item span[b-ow39x3997g] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 0.9;
    min-width: 0;
}

/* Size Cell */
.size-cell[b-ow39x3997g] {
    text-align: right;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.size-cell .total-size[b-ow39x3997g] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.85rem;
}

/* Buffer Cell */
.buffer-cell[b-ow39x3997g] {
    text-align: right;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.buffer-cell .buffer-size[b-ow39x3997g] {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Speed Cell */
.speed-cell[b-ow39x3997g] {
    text-align: right;
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.speed-cell span[b-ow39x3997g] {
    font-weight: 500;
    font-size: 0.85rem;
}

/* Threads Cell */
.threads-cell[b-ow39x3997g] {
    text-align: center;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

.threads-cell span[b-ow39x3997g] {
    font-weight: 500;
    color: var(--text-primary);
    font-size: 0.85rem;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tasks-page[b-ow39x3997g] {
        padding: 0; /* Remove padding to ensure precise viewport fit */
        margin: 0; /* Ensure no margins */
        height: calc(100vh - 80px); /* Match desktop calculations */
        max-height: calc(100vh - 80px);
        overflow: hidden; /* Prevent page-level scrolling */
    }
    
    .task-summary[b-ow39x3997g] {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    
    .summary-card[b-ow39x3997g] {
        height: 65px;
        padding: 0.375rem;
    }
    
    .summary-card-title[b-ow39x3997g] {
        font-size: 0.65rem;
    }
    
    .summary-count[b-ow39x3997g] {
        font-size: 1.125rem;
    }
    
    .summary-subtitle[b-ow39x3997g] {
        font-size: 0.65rem;
    }
    
    .summary-card-icon[b-ow39x3997g] {
        width: 18px;
        height: 18px;
        font-size: 0.7rem;
    }
    
    .progress-size-inline[b-ow39x3997g],
    .progress-percentage-inline[b-ow39x3997g] {
        font-size: 0.55rem;
    }
    
    .download-tasks-table-desktop[b-ow39x3997g] {
        display: none;
    }

    .download-tasks-compact-list[b-ow39x3997g] {
        display: block;
        flex: 1; /* Fill available space and scroll internally */
        overflow-y: auto;
        min-height: 0;
    }

    .download-tasks-table-desktop .table thead[b-ow39x3997g],
    .download-tasks-table-desktop .table tbody[b-ow39x3997g] {
        display: block;
    }

    .download-tasks-table-desktop .table tbody tr[b-ow39x3997g] {
        display: block;
        width: 100%;
    }
}

/* Dark Theme - use data-theme attribute only */
:root[data-theme="dark"] .download-tasks-table-desktop .table[b-ow39x3997g] {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .download-task-row.status-running[b-ow39x3997g] {
    background-color: rgba(40, 167, 69, 0.1);
}

:root[data-theme="dark"] .download-task-row.status-idle[b-ow39x3997g] {
    background-color: rgba(108, 117, 125, 0.1);
}

/* --- Desktop Compact Redesign for System Tasks Summary Cards --- */
@media (min-width: 769px) {
    /* Grid: slightly larger min card width and more breathing room */
    .tasks-page .task-summary[b-ow39x3997g] {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
        gap: 0.75rem !important;
    }

    /* Card base: compact KPI tile with left icon tile */
    .tasks-page .summary-card[b-ow39x3997g] {
        position: relative !important;
        height: 72px !important; /* compact */
        padding: 0.5rem 0.75rem 0.5rem 3.25rem !important; /* reserve space for icon tile */
        border-radius: 12px !important;
        background: var(--card-background) !important;
        border: 1px solid var(--border-color) !important;
        box-shadow: none !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 0.15rem !important;
        transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
    }

    /* Remove the old top accent bar for a cleaner look */
    .tasks-page .summary-card[b-ow39x3997g]::before {
        display: none !important;
    }

    .tasks-page .summary-card:hover[b-ow39x3997g] {
        transform: translateY(-1px) !important;
        box-shadow: 0 4px 12px rgba(0,0,0,.08) !important;
        border-color: var(--primary-color) !important;
    }

    .tasks-page .summary-card.active[b-ow39x3997g] {
        border-color: var(--primary-color) !important;
        box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb, 13, 110, 253), .15) !important;
        background: linear-gradient(180deg, var(--card-background), rgba(255,255,255,.02)) !important;
    }

    /* Left icon tile (reuse inline icon element) */
    .tasks-page .summary-card .summary-card-icon-inline[b-ow39x3997g] {
        position: absolute !important;
        left: 0.75rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
        color: #fff !important;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 2px 6px rgba(0,0,0,.12) !important;
    }

    /* Typography refinements */
    .tasks-page .summary-card-header[b-ow39x3997g] {
        margin: 0 !important;
        align-items: baseline !important;
    }

    .tasks-page .summary-card-title[b-ow39x3997g] {
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        color: var(--text-secondary) !important;
        text-transform: uppercase !important;
        letter-spacing: .04em !important;
        margin: 0 !important;
    }

    .tasks-page .summary-count[b-ow39x3997g] {
        font-size: 1.35rem !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        margin: 0 !important;
        color: var(--text-primary) !important;
    }

    .tasks-page .summary-subtitle[b-ow39x3997g] {
        font-size: 0.72rem !important;
        color: var(--text-muted) !important;
        font-weight: 500 !important;
    }

    .tasks-page .summary-subtitle.active[b-ow39x3997g] { /* accent by state */
        color: var(--success-color) !important;
    }
    .tasks-page .summary-subtitle.active.upload[b-ow39x3997g] { color: var(--primary-color) !important; }
    .tasks-page .summary-subtitle.active.download[b-ow39x3997g] { color: var(--info-color, #17a2b8) !important; }
    .tasks-page .summary-subtitle.active.copy[b-ow39x3997g] { color: var(--warning-color) !important; }

    /* Slim progress inline for upload card */
    .tasks-page .summary-progress-inline[b-ow39x3997g] {
        display: flex !important;
        align-items: center !important;
        gap: 0.35rem !important;
    }
    .tasks-page .summary-progress-inline .progress-size-inline[b-ow39x3997g],
    .tasks-page .summary-progress-inline .progress-percentage-inline[b-ow39x3997g] {
        font-size: 0.7rem !important;
        color: var(--text-muted) !important;
        white-space: nowrap !important;
    }
    .tasks-page .summary-progress-inline .progress-bar-inline[b-ow39x3997g] {
        flex: 1 1 auto !important;
        height: 4px !important;
        background: var(--bg-tertiary, rgba(255,255,255,.06)) !important;
        border-radius: 999px !important;
        overflow: hidden !important;
        min-width: 60px !important;
    }
    .tasks-page .summary-progress-inline .progress-bar-inline .progress-fill[b-ow39x3997g] {
        height: 100% !important;
        background: linear-gradient(90deg, var(--primary-color), rgba(var(--primary-color-rgb, 13, 110, 253), .7)) !important;
        border-radius: inherit !important;
    }
}
/* /Pages/WebDav.razor.rz.scp.css */
/* WebDAV Page Styles */
.webdav-page[b-5nta226n1w] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-primary);
}

.webdav-header[b-5nta226n1w] {
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #1e40af 0%, #0ea5e9 50%, #06b6d4 100%);
    border-radius: 16px;
    padding: 2rem;
    color: white;
    box-shadow: 0 8px 32px rgba(30, 64, 175, 0.3);
    position: relative;
    overflow: hidden;
}

.webdav-header-content[b-5nta226n1w] {
    max-width: 1200px;
    margin: 0 auto;
}

.webdav-title[b-5nta226n1w] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.25rem;
}

.webdav-title i[b-5nta226n1w] {
    font-size: 1.75rem;
    opacity: 0.9;
}

.webdav-title h1[b-5nta226n1w] {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
}

.webdav-description[b-5nta226n1w] {
    font-size: 1rem;
    opacity: 0.9;
    margin: 0;
}

.webdav-content[b-5nta226n1w] {
    flex: 1;
    padding: 0 1rem;
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Loading and Error States */
.webdav-loading[b-5nta226n1w],
.webdav-error[b-5nta226n1w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
}

.loading-spinner i[b-5nta226n1w] {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.error-icon i[b-5nta226n1w] {
    font-size: 3rem;
    color: var(--danger-color);
    margin-bottom: 1rem;
}

/* Server Status Card */
.webdav-status-card[b-5nta226n1w] {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-sm);
}

.status-header[b-5nta226n1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.status-info h3[b-5nta226n1w] {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.status-indicator[b-5nta226n1w] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius);
    font-weight: 600;
    font-size: 0.875rem;
}

.status-indicator.enabled[b-5nta226n1w] {
    background: var(--success-bg);
    color: var(--success-color);
}

.status-indicator.disabled[b-5nta226n1w] {
    background: var(--danger-bg);
    color: var(--danger-color);
}

.status-actions .btn[b-5nta226n1w] {
    min-width: 150px;
}

.server-url[b-5nta226n1w] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg-tertiary);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.server-url label[b-5nta226n1w] {
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0;
}

.url-display[b-5nta226n1w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.url-display code[b-5nta226n1w] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    font-family: var(--font-mono);
    color: var(--text-primary);
    flex: 1;
}

.copy-url-btn[b-5nta226n1w] {
    padding: 0.5rem 0.75rem;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
    white-space: nowrap;
}

.copy-url-btn:hover[b-5nta226n1w] {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: translateY(-1px);
}

/* Configuration Grid */
.webdav-config-grid[b-5nta226n1w] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.config-card[b-5nta226n1w] {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s ease;
}

.config-card:hover[b-5nta226n1w] {
    box-shadow: var(--shadow-md);
}

.config-header[b-5nta226n1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.config-header h3[b-5nta226n1w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.config-header i[b-5nta226n1w] {
    font-size: 1.125rem;
    color: var(--primary-color);
}

/* Toggle Switch */
.switch[b-5nta226n1w] {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input[b-5nta226n1w] {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider[b-5nta226n1w] {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--bs-secondary-bg);
    transition: 0.3s;
    border-radius: 28px;
    border: 1px solid var(--bs-border-color);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

.slider[b-5nta226n1w]:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--bs-body-bg);
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--bs-border-color);
}

input:checked + .slider[b-5nta226n1w] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--bs-primary-bg-subtle);
}

input:checked + .slider[b-5nta226n1w]:before {
    transform: translateX(22px);
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

input:focus + .slider[b-5nta226n1w] {
    outline: 2px solid var(--bs-primary-bg-subtle);
    outline-offset: 2px;
}

input:disabled + .slider[b-5nta226n1w] {
    opacity: 0.5;
    cursor: not-allowed;
}

input:disabled + .slider[b-5nta226n1w]:before {
    cursor: not-allowed;
}

.config-content[b-5nta226n1w] {
    padding: 1.25rem;
}

.form-group[b-5nta226n1w] {
    margin-bottom: 1.125rem;
}

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

.form-group label[b-5nta226n1w] {
    display: block;
    margin-bottom: 0.375rem;
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
}

.input-with-button[b-5nta226n1w] {
    display: flex;
    gap: 0.5rem;
}

.input-with-button .form-control[b-5nta226n1w] {
    flex: 1;
}

.input-with-button .btn[b-5nta226n1w] {
    flex-shrink: 0;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Checkbox Label */
.checkbox-label[b-5nta226n1w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    font-size: 0.875rem;
}

.checkbox-label input[type="checkbox"][b-5nta226n1w] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--bs-primary);
    cursor: pointer;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
}

.checkbox-label input[type="checkbox"]:focus[b-5nta226n1w] {
    outline: 2px solid var(--bs-primary-bg-subtle);
    outline-offset: 2px;
    border-color: var(--bs-primary);
}

.checkbox-label input[type="checkbox"]:checked[b-5nta226n1w] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Info and Warning Messages */
.config-info[b-5nta226n1w],
.config-warning[b-5nta226n1w] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    line-height: 1.4;
    margin-top: 0.75rem;
}

.config-info[b-5nta226n1w] {
    background: var(--info-bg);
    color: var(--info-color);
    border: 1px solid var(--info-border);
}

.config-warning[b-5nta226n1w] {
    background: var(--warning-bg);
    color: var(--warning-color);
    border: 1px solid var(--warning-border);
}

.config-info i[b-5nta226n1w],
.config-warning i[b-5nta226n1w] {
    margin-top: 0.1rem;
    flex-shrink: 0;
}

/* Users Section */
.users-section[b-5nta226n1w] {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.users-header[b-5nta226n1w] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
}

.users-header h3[b-5nta226n1w] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.users-header i[b-5nta226n1w] {
    color: var(--primary-color);
}

/* Users Grid */
.users-grid[b-5nta226n1w] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.25rem;
    padding: 1.25rem;
}

.user-card[b-5nta226n1w] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 1rem;
    transition: all 0.2s ease;
}

.user-card:hover[b-5nta226n1w] {
    box-shadow: var(--shadow-sm);
    border-color: var(--primary-color);
}

.user-info[b-5nta226n1w] {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.user-avatar[b-5nta226n1w] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.user-details[b-5nta226n1w] {
    flex: 1;
    min-width: 0;
}

.user-details h4[b-5nta226n1w] {
    margin: 0 0 0.375rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.user-status[b-5nta226n1w] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.375rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.user-status.enabled[b-5nta226n1w] {
    color: var(--success-color);
}

.user-status.disabled[b-5nta226n1w] {
    color: var(--danger-color);
}

.user-badges[b-5nta226n1w] {
    display: flex;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.user-badges .badge[b-5nta226n1w] {
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
}

.badge.readonly[b-5nta226n1w] {
    background: var(--info-bg);
    color: var(--info-color);
}

.badge.readwrite[b-5nta226n1w] {
    background: var(--success-bg);
    color: var(--success-color);
}

.badge.guest[b-5nta226n1w] {
    background: var(--warning-bg);
    color: var(--warning-color);
}

.user-path[b-5nta226n1w] {
    font-size: 0.8rem;
}

.user-path .path-label[b-5nta226n1w] {
    color: var(--text-secondary);
    font-weight: 500;
}

.user-path code[b-5nta226n1w] {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-mono);
    color: var(--text-primary);
    font-size: 0.75rem;
}

.user-actions[b-5nta226n1w] {
    display: flex;
    gap: 0.375rem;
    justify-content: flex-end;
}

.user-actions .btn[b-5nta226n1w] {
    padding: 0.3rem 0.6rem;
}

/* Empty State */
.empty-state[b-5nta226n1w] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    text-align: center;
}

.empty-icon[b-5nta226n1w] {
    font-size: 2.5rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}

.empty-state h4[b-5nta226n1w] {
    color: var(--text-secondary);
    margin-bottom: 0.375rem;
    font-size: 1.125rem;
}

.empty-state p[b-5nta226n1w] {
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
}

/* Modal Overlay */
.modal-overlay[b-5nta226n1w] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    padding: 1rem;
}

/* Confirmation Modal */
.confirmation-modal[b-5nta226n1w] {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 400px;
    width: 90%;
    overflow: hidden;
}

.confirmation-modal .modal-header[b-5nta226n1w] {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.confirmation-modal .modal-header h3[b-5nta226n1w] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
}

.modal-close-btn[b-5nta226n1w] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-5nta226n1w] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.confirmation-modal .modal-content[b-5nta226n1w] {
    padding: 1.5rem;
    text-align: center;
}

.confirm-icon[b-5nta226n1w] {
    font-size: 2.5rem;
    color: var(--warning-color);
    margin-bottom: 0.75rem;
}

.confirmation-modal p[b-5nta226n1w] {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
    font-size: 0.9rem;
}

.modal-actions[b-5nta226n1w] {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .webdav-header[b-5nta226n1w] {
        padding: 1.5rem 1rem;
    }
    
    .webdav-title h1[b-5nta226n1w] {
        font-size: 2rem;
    }
    
    .webdav-config-grid[b-5nta226n1w] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .status-header[b-5nta226n1w] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .server-url[b-5nta226n1w] {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    
    .users-grid[b-5nta226n1w] {
        grid-template-columns: 1fr;
        padding: 1rem;
    }
    
    .user-info[b-5nta226n1w] {
        flex-direction: column;
        text-align: center;
    }
    
    .user-actions[b-5nta226n1w] {
        justify-content: center;
    }
    
    .modal-actions[b-5nta226n1w] {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .webdav-content[b-5nta226n1w] {
        padding: 0 0.5rem;
    }
    
    .config-header[b-5nta226n1w],
    .config-content[b-5nta226n1w],
    .users-header[b-5nta226n1w] {
        padding: 1rem;
    }
    
    .webdav-status-card[b-5nta226n1w] {
        padding: 1.5rem;
    }
    
    .input-with-button[b-5nta226n1w] {
        flex-direction: column;
    }
    
    .input-with-button .btn[b-5nta226n1w] {
        aspect-ratio: auto;
    }
}
/* /Shared/AddCloudStorageModal.razor.rz.scp.css */
/* Add Cloud Storage Modal Styles */
.modal-overlay[b-xvc548bhp9] {
    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: 1050;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.modal-container[b-xvc548bhp9] {
    background: var(--card-background);
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
}

.modal-header[b-xvc548bhp9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, #1e40af 0%, #0ea5e9 100%);
    color: white;
    border-radius: 16px 16px 0 0;
}

.modal-header h3[b-xvc548bhp9] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal-close-btn[b-xvc548bhp9] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.modal-close-btn:hover[b-xvc548bhp9] {
    background: rgba(255, 255, 255, 0.3);
}

.modal-content[b-xvc548bhp9] {
    padding: 1.5rem;
}

.modal-footer[b-xvc548bhp9] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 16px 16px;
}

/* Loading and Error States */
.loading-container[b-xvc548bhp9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    text-align: center;
}

.loading-spinner[b-xvc548bhp9] {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.error-message[b-xvc548bhp9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    text-align: center;
    color: var(--danger-color);
}

.error-message i[b-xvc548bhp9] {
    font-size: 2rem;
    opacity: 0.7;
}

.error-details[b-xvc548bhp9] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    margin: 0;
}

/* Cloud Types Grid */
.cloud-types-grid[b-xvc548bhp9] {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cloud-types-grid.collapsed[b-xvc548bhp9] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    margin-bottom: 0;
}

.cloud-type-section h4[b-xvc548bhp9] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.cloud-options[b-xvc548bhp9] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
}

.cloud-option[b-xvc548bhp9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--card-background);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    color: var(--text-primary);
}

.cloud-option:hover[b-xvc548bhp9] {
    border-color: var(--primary-color);
    background: var(--bg-tertiary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.15);
}

.cloud-option img[b-xvc548bhp9] {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.cloud-icon[b-xvc548bhp9] {
    font-size: 32px;
    color: var(--primary-color);
}

.cloud-option span[b-xvc548bhp9] {
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
}

/* Configuration Form */
.cloud-config-form[b-xvc548bhp9] {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.cloud-config-form h4[b-xvc548bhp9] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
}

.form-header[b-xvc548bhp9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.form-header h4[b-xvc548bhp9] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-back[b-xvc548bhp9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.form-group[b-xvc548bhp9] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.form-group label[b-xvc548bhp9] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-group input[b-xvc548bhp9],
.form-group textarea[b-xvc548bhp9] {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s ease;
}

.form-group input:focus[b-xvc548bhp9],
.form-group textarea:focus[b-xvc548bhp9] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}

.form-group textarea[b-xvc548bhp9] {
    resize: vertical;
    min-height: 80px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
}

.form-group input[type="checkbox"][b-xvc548bhp9] {
    width: auto;
    margin: 0;
}

/* Buttons */
.btn[b-xvc548bhp9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

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

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

.btn-primary:hover:not(:disabled)[b-xvc548bhp9] {
    background: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-outline[b-xvc548bhp9] {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-outline:hover:not(:disabled)[b-xvc548bhp9] {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-secondary[b-xvc548bhp9] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-xvc548bhp9] {
    background: var(--bg-quaternary);
    border-color: var(--text-muted);
}

/* WebDAV Specific Styles */
.form-row[b-xvc548bhp9] {
    display: flex;
    gap: 1rem;
    align-items: end;
}

.form-group-flex[b-xvc548bhp9] {
    flex: 1;
}

.form-group-port[b-xvc548bhp9] {
    min-width: 100px;
    max-width: 120px;
}

.protocol-methods[b-xvc548bhp9] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.protocol-methods .btn[b-xvc548bhp9] {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    min-width: 70px;
}

.auth-methods[b-xvc548bhp9] {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.auth-methods .btn[b-xvc548bhp9] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    min-width: 120px;
}

.webdav-preview[b-xvc548bhp9] {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
}

.webdav-preview label[b-xvc548bhp9] {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    display: block;
}

.url-preview[b-xvc548bhp9] {
    background: var(--input-background);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.75rem;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--text-primary);
    word-break: break-all;
    min-height: 2.5rem;
    display: flex;
    align-items: center;
}

.checkbox-label[b-xvc548bhp9] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    margin-bottom: 0;
}

.checkbox-label input[type="checkbox"][b-xvc548bhp9] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-text[b-xvc548bhp9] {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.form-text[b-xvc548bhp9] {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Input Group */
.input-group[b-xvc548bhp9] {
    display: flex !important;
    border-radius: 8px;
    overflow: hidden;
    align-items: stretch;
}

.input-group .form-control[b-xvc548bhp9] {
    border-radius: 0 !important;
    border-right: none !important;
    flex: 1;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
}

.input-group .btn[b-xvc548bhp9] {
    border-radius: 0 !important;
    border-left: none !important;
    border-color: var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 50px;
}

.input-group .btn:hover[b-xvc548bhp9] {
    background: var(--bg-quaternary);
    color: var(--text-primary);
}

/* Legacy Local Folder Input Group - keeping for backwards compatibility */
.folder-input-group[b-xvc548bhp9] {
    position: relative;
    display: flex;
    align-items: stretch;
}

.folder-input-with-button[b-xvc548bhp9] {
    flex: 1;
    padding-right: 120px; /* Make space for the button */
}

.folder-browse-btn-inline[b-xvc548bhp9] {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.5rem 0.75rem;
    white-space: nowrap;
    min-width: auto;
    height: calc(100% - 8px);
    border-radius: 4px;
    font-size: 0.875rem;
    z-index: 2;
}

.folder-browse-btn-inline i[b-xvc548bhp9] {
    margin-right: 0.4rem;
}

/* Legacy support for old folder button style */
.folder-browse-btn[b-xvc548bhp9] {
    padding: 0.75rem 1rem;
    white-space: nowrap;
    min-width: auto;
}

.folder-browse-btn i[b-xvc548bhp9] {
    margin-right: 0.5rem;
}

/* OAuth Container */
.oauth-container[b-xvc548bhp9] {
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--card-background);
    text-align: center;
    margin: 1rem 0;
}

.oauth-container .oauth-login-container[b-xvc548bhp9] {
    padding: 0; /* Override the default padding */
}

/* OAuth specific styling within modal */
.oauth-container .oauth-button[b-xvc548bhp9] {
    width: 100%;
    max-width: 300px;
}

.oauth-container .oauth-help[b-xvc548bhp9] {
    margin-top: 1rem;
    font-size: 0.8rem;
}

.oauth-container .oauth-error[b-xvc548bhp9] {
    margin: 1rem 0;
    padding: 1rem;
}

.oauth-container .oauth-processing[b-xvc548bhp9] {
    padding: 1.5rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-container[b-xvc548bhp9] {
        width: 95%;
        margin: 1rem;
    }
    
    .cloud-options[b-xvc548bhp9] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .modal-header[b-xvc548bhp9],
    .modal-content[b-xvc548bhp9],
    .modal-footer[b-xvc548bhp9] {
        padding: 1rem;
    }
    
    .form-row[b-xvc548bhp9] {
        flex-direction: row;
        gap: 0.5rem;
        align-items: end;
    }
    
    .form-group-port[b-xvc548bhp9] {
        max-width: 90px;
        min-width: 80px;
    }
    
    .form-group-flex[b-xvc548bhp9] {
        flex: 1;
    }
    
    .protocol-methods[b-xvc548bhp9],
    .auth-methods[b-xvc548bhp9] {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    
    .protocol-methods .btn[b-xvc548bhp9],
    .auth-methods .btn[b-xvc548bhp9] {
        flex: 1;
        min-width: 120px;
        justify-content: center;
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .folder-input-group[b-xvc548bhp9] {
        position: relative; /* Keep inline style on mobile */
    }
    
    .folder-input-with-button[b-xvc548bhp9] {
        padding-right: 100px; /* Smaller padding on mobile */
    }
    
    .folder-browse-btn-inline[b-xvc548bhp9] {
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        right: 3px;
    }
    
    .folder-browse-btn-inline i[b-xvc548bhp9] {
        margin-right: 0.3rem;
    }
    
    .input-group .btn[b-xvc548bhp9] {
        padding: 0.75rem 0.75rem;
        font-size: 0.875rem;
        min-width: 50px;
    }
}

@media (max-width: 480px) {
    .protocol-methods .btn[b-xvc548bhp9],
    .auth-methods .btn[b-xvc548bhp9] {
        font-size: 0.8125rem;
        padding: 0.625rem 0.5rem;
        min-width: 90px;
    }
    
    .input-group .btn[b-xvc548bhp9] {
        padding: 0.75rem 0.625rem;
        font-size: 0.8rem;
        min-width: 45px;
    }
}

/* Input group responsive styles for very small screens */
@media (max-width: 380px) {
    .modal-container[b-xvc548bhp9] {
        width: 98%;
        margin: 0.5rem;
    }
    
    .modal-header[b-xvc548bhp9],
    .modal-content[b-xvc548bhp9],
    .modal-footer[b-xvc548bhp9] {
        padding: 0.75rem;
    }
    
    .cloud-options[b-xvc548bhp9] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .protocol-methods .btn[b-xvc548bhp9],
    .auth-methods .btn[b-xvc548bhp9] {
        font-size: 0.8125rem;
        padding: 0.625rem 0.5rem;
        min-width: 100px;
    }
    
    .input-group[b-xvc548bhp9] {
        flex-direction: column;
        border-radius: 8px;
        overflow: visible;
    }
    
    .input-group .form-control[b-xvc548bhp9] {
        border-radius: 8px 8px 0 0 !important;
        border-right: 1px solid var(--border-color) !important;
        border-bottom: none !important;
    }
    
    .input-group .btn[b-xvc548bhp9] {
        border-radius: 0 0 8px 8px !important;
        border-left: 1px solid var(--border-color) !important;
        border-top: none !important;
        padding: 0.75rem;
    }
}
/* /Shared/AddMountPointModal.razor.rz.scp.css */
.modal-overlay[b-b5blswhxoe] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: none;
}

.add-mount-modal[b-b5blswhxoe] {
    background: var(--card-background);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    animation: slideIn-b-b5blswhxoe 0.3s ease-out;
}

@keyframes slideIn-b-b5blswhxoe {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modal-header[b-b5blswhxoe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--card-background);
    border-radius: 12px 12px 0 0;
    position: relative;
    z-index: 1;
}

.modal-header h3[b-b5blswhxoe] {
    margin: 0;
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal-header h3 i[b-b5blswhxoe] {
    color: var(--primary-color);
}

.modal-close-btn[b-b5blswhxoe] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-b5blswhxoe] {
    color: var(--text-color);
    background: var(--hover-color);
}

.modal-content[b-b5blswhxoe] {
    padding: 2rem;
}

.form-group[b-b5blswhxoe] {
    margin-bottom: 1.5rem;
}

.form-group label[b-b5blswhxoe] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-color);
    font-weight: 500;
    font-size: 0.875rem;
}

.form-control[b-b5blswhxoe] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.form-control:focus[b-b5blswhxoe] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.form-control:disabled[b-b5blswhxoe] {
    background: var(--disabled-bg);
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* Fix modal text visibility */
.modal-header h3[b-b5blswhxoe] {
    color: #f8f9fa !important;
}

.modal-content label[b-b5blswhxoe] {
    color: #f8f9fa !important;
}

.modal-footer .btn[b-b5blswhxoe] {
    color: #f8f9fa !important;
}

.form-select[b-b5blswhxoe] {
    width: 100%;
    padding: 0.75rem;
    padding-right: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text-color);
    font-size: 0.875rem;
    transition: all 0.2s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

.form-select:focus[b-b5blswhxoe] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.1);
}

.form-select:disabled[b-b5blswhxoe] {
    background: var(--disabled-bg);
    color: var(--text-secondary);
    cursor: not-allowed;
}

.form-select option[b-b5blswhxoe] {
    color: var(--text-color);
    background: var(--input-bg);
}

.add-mount-modal .input-group[b-b5blswhxoe] {
    display: flex !important;
    border-radius: 8px;
    overflow: hidden;
    align-items: stretch;
}

.add-mount-modal .input-group .form-control[b-b5blswhxoe] {
    border-radius: 0 !important;
    border-right: none !important;
    flex: 1;
    flex-shrink: 0;
    width: 100%;
    margin: 0;
}

.add-mount-modal .input-group .btn[b-b5blswhxoe] {
    border-radius: 0 !important;
    border-left: none !important;
    border-color: var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.add-mount-modal .input-group .btn:hover[b-b5blswhxoe] {
    background: var(--bg-quaternary);
    color: var(--text-primary);
}

.mount-point-preview[b-b5blswhxoe] {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: 6px;
    font-size: 0.875rem;
    color: var(--info-text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mount-point-preview i[b-b5blswhxoe] {
    color: var(--info-color);
}

.radio-group[b-b5blswhxoe] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.radio-option[b-b5blswhxoe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--input-bg);
    transition: all 0.2s ease;
    flex: 1;
    min-height: 60px;
    font-size: 0.875rem;
    color: var(--text-color);
    font-weight: 500;
}

.radio-option:hover[b-b5blswhxoe] {
    background: var(--hover-color);
    border-color: var(--primary-color);
}

.radio-option input[type="radio"][b-b5blswhxoe] {
    margin: 0;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.radio-option input[type="radio"]:checked ~ i[b-b5blswhxoe] {
    color: var(--primary-color);
}

.radio-option i[b-b5blswhxoe] {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.radio-option input[type="radio"]:checked ~ i[b-b5blswhxoe] {
    color: var(--primary-color);
}

.radio-option i[b-b5blswhxoe] {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.checkbox-group[b-b5blswhxoe] {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.checkbox-option[b-b5blswhxoe] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 1rem;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
    background: var(--input-bg);
    flex: 1;
    min-height: 60px;
    font-size: 0.875rem;
    color: var(--text-color);
    font-weight: 500;
}

.checkbox-option:hover[b-b5blswhxoe] {
    background: var(--hover-color);
    border-color: var(--primary-color);
}

.checkbox-option input[type="checkbox"][b-b5blswhxoe] {
    margin: 0;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.checkbox-option input[type="checkbox"]:checked ~ i[b-b5blswhxoe] {
    color: var(--primary-color);
}

.checkbox-option i[b-b5blswhxoe] {
    font-size: 1.1rem;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

.advanced-settings[b-b5blswhxoe] {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--surface-secondary);
}

.form-row[b-b5blswhxoe] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}

.form-group-sm[b-b5blswhxoe] {
    margin-bottom: 0;
}

.form-group-sm label[b-b5blswhxoe] {
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
}

.form-group-sm .form-control[b-b5blswhxoe] {
    padding: 0.5rem;
    font-size: 0.75rem;
}

.modal-footer[b-b5blswhxoe] {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2rem;
    border-top: 1px solid var(--border-color);
    background: var(--card-background);
    border-radius: 0 0 12px 12px;
    position: relative;
    z-index: 1;
}

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

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

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

.btn-primary:hover:not(:disabled)[b-b5blswhxoe] {
    background: var(--primary-hover);
}

.btn-outline[b-b5blswhxoe] {
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-outline:hover:not(:disabled)[b-b5blswhxoe] {
    background: var(--hover-color);
    border-color: var(--primary-color);
}

.btn-sm[b-b5blswhxoe] {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

/* Responsive design */
@media (max-width: 768px) {
    .add-mount-modal[b-b5blswhxoe] {
        width: 95%;
        margin: 1rem;
    }
    
    .modal-header[b-b5blswhxoe],
    .modal-content[b-b5blswhxoe],
    .modal-footer[b-b5blswhxoe] {
        padding: 1rem;
    }
    
    .radio-group[b-b5blswhxoe] {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .form-row[b-b5blswhxoe] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .modal-footer[b-b5blswhxoe] {
        padding: 1rem;
        gap: 0.5rem;
        justify-content: space-between;
    }
    
    .modal-footer .btn[b-b5blswhxoe] {
        flex: 1;
        justify-content: center;
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
    }
}

/* Input group responsive styles for very small screens */
@media (max-width: 480px) {
    .add-mount-modal .input-group[b-b5blswhxoe] {
        flex-direction: column;
        border-radius: 8px;
        overflow: visible;
    }
    
    .add-mount-modal .input-group .form-control[b-b5blswhxoe] {
        border-radius: 8px 8px 0 0 !important;
        border-right: 1px solid var(--border-color) !important;
        border-bottom: none !important;
    }
    
    .add-mount-modal .input-group .btn[b-b5blswhxoe] {
        border-radius: 0 0 8px 8px !important;
        border-left: 1px solid var(--border-color) !important;
        border-top: none !important;
    }
}

/* Dark theme adjustments - use data-theme attribute only */
:root[data-theme="dark"] .add-mount-modal[b-b5blswhxoe] {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

/* Dark theme dropdown arrow */
:root[data-theme="dark"] .form-select[b-b5blswhxoe],
:root:not([data-theme]) .form-select[b-b5blswhxoe] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

/* Light theme text visibility fix */
:root[data-theme="light"] .modal-header h3[b-b5blswhxoe],
:root[data-theme="light"] .form-group label[b-b5blswhxoe],
:root[data-theme="light"] .form-control[b-b5blswhxoe],
:root[data-theme="light"] .form-select[b-b5blswhxoe],
:root[data-theme="light"] .checkbox-option[b-b5blswhxoe],
:root[data-theme="light"] .btn-outline[b-b5blswhxoe] {
    color: #212529 !important;
}

:root[data-theme="light"] .form-control[b-b5blswhxoe]::placeholder {
    color: #6c757d !important;
}

:root[data-theme="light"] .form-select[b-b5blswhxoe] {
    background-color: #fff !important;
    border-color: #ced4da !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

:root[data-theme="light"] .form-select option[b-b5blswhxoe] {
    color: #212529 !important;
    background-color: #fff !important;
}
/* /Shared/AddSharedLinkModal.razor.rz.scp.css */
/* AddSharedLinkModal.razor.css */

.modal[b-j0ujidn76z] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content[b-j0ujidn76z] {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-lg);
}

.modal-header[b-j0ujidn76z] {
    background-color: var(--bs-primary);
    color: white;
    border-bottom: 1px solid var(--bs-border-color);
}

.modal-header .modal-title[b-j0ujidn76z] {
    font-weight: 600;
}

.modal-header .btn-close[b-j0ujidn76z] {
    color: white;
    opacity: 0.8;
}

.modal-header .btn-close:hover[b-j0ujidn76z] {
    opacity: 1;
}

.modal-body[b-j0ujidn76z] {
    padding: 1.5rem;
}

.form-label[b-j0ujidn76z] {
    font-weight: 500;
    color: var(--bs-body-color);
    margin-bottom: 0.5rem;
}

.form-control[b-j0ujidn76z] {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus[b-j0ujidn76z] {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-primary);
    color: var(--bs-body-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

.form-control.is-invalid[b-j0ujidn76z] {
    border-color: var(--bs-danger);
}

.form-control.is-invalid:focus[b-j0ujidn76z] {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25);
}

.form-text[b-j0ujidn76z] {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
}

.invalid-feedback[b-j0ujidn76z] {
    color: var(--bs-danger);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.alert[b-j0ujidn76z] {
    border: none;
    border-radius: 0.375rem;
    margin-bottom: 1rem;
}

.alert-danger[b-j0ujidn76z] {
    background-color: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger);
}

.alert-success[b-j0ujidn76z] {
    background-color: rgba(var(--bs-success-rgb), 0.1);
    color: var(--bs-success);
}

.modal-footer[b-j0ujidn76z] {
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
}

.btn[b-j0ujidn76z] {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
}

.btn-primary[b-j0ujidn76z] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.btn-primary:hover:not(:disabled)[b-j0ujidn76z] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-secondary[b-j0ujidn76z] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-j0ujidn76z] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    opacity: 0.9;
}

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

.spinner-border-sm[b-j0ujidn76z] {
    width: 1rem;
    height: 1rem;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .modal-dialog[b-j0ujidn76z] {
        margin: 1rem;
    }
    
    .modal-body[b-j0ujidn76z] {
        padding: 1rem;
    }
    
    .modal-footer[b-j0ujidn76z] {
        padding: 0.75rem 1rem;
    }
}

/* Dark theme adjustments - use data-theme attribute only */
:root[data-theme="dark"] .modal-backdrop[b-j0ujidn76z] {
    background-color: rgba(0, 0, 0, 0.7);
}
/* /Shared/BreadcrumbNavigation.razor.rz.scp.css */
/* Breadcrumb component styles */
.breadcrumb-compact[b-s1tqyfix7q] {
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0; /* Allow shrinking */
    overflow: visible; /* Allow content to use full width */
    flex: 1; /* Take all available space */
}

.breadcrumb[b-s1tqyfix7q] {
    margin-bottom: 0;
    background: transparent;
    padding: 0;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow: visible; /* Allow content to use full width */
    width: 100%;
    min-width: 0; /* Allow shrinking */
    flex: 1; /* Take all available space */
}

.breadcrumb-item[b-s1tqyfix7q] {
    display: flex;
    align-items: center;
    flex-shrink: 1; /* Allow breadcrumb items to shrink when needed */
    white-space: nowrap; /* Prevent text wrapping */
    min-width: 0; /* Allow content to shrink */
    max-width: none; /* Remove artificial width limit - let items use available space */
    overflow: hidden; /* Hide overflow text */
}

/* Give the last breadcrumb item priority for available space */
.breadcrumb-item:last-child[b-s1tqyfix7q] {
    flex-shrink: 0.5; /* Shrink less than other items */
    flex-grow: 1; /* Take extra available space */
}

.breadcrumb-compact .breadcrumb-item:not(:last-child)[b-s1tqyfix7q]::after {
    content: "/";
    color: var(--text-muted);
    margin: 0 0.25rem; /* Reduced margin for space efficiency */
    font-size: 0.8rem;
    flex-shrink: 0; /* Don't shrink the separator */
}

/* Override Bootstrap breadcrumb separators */
.breadcrumb-compact .breadcrumb-item + .breadcrumb-item[b-s1tqyfix7q]::before {
    content: none !important; /* Remove Bootstrap's ">" separator */
}

.breadcrumb-item a[b-s1tqyfix7q] {
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s ease;
    border-radius: 4px;
    padding: 2px 4px; /* Reduced padding for space efficiency */
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.125rem; /* Reduced gap */
    min-width: 0; /* Allow content to shrink */
    flex: 1; /* Take available space within the breadcrumb item */
    overflow: hidden; /* Hide overflow text */
    text-overflow: ellipsis; /* Show ellipsis for long text */
}

.breadcrumb-item a:hover[b-s1tqyfix7q] {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.breadcrumb-item.home-item a[b-s1tqyfix7q] {
    padding: 4px 6px; /* Reduced padding for space efficiency */
    font-weight: 600;
    min-width: 32px; /* Reduced min-width */
    display: flex;
    align-items: center;
    justify-content: center;
}

.breadcrumb-item.home-item a:hover[b-s1tqyfix7q] {
    background: var(--bg-secondary);
}

.breadcrumb-item.home-item i[b-s1tqyfix7q] {
    font-size: 1rem;
    color: var(--primary-color);
    line-height: 1; /* Prevent icon from being cut off */
    flex-shrink: 0; /* Don't shrink the icon */
}

/* Breadcrumb ellipsis styles */
.breadcrumb-item.ellipsis[b-s1tqyfix7q] {
    opacity: 0.7;
}

.breadcrumb-ellipsis[b-s1tqyfix7q] {
    font-weight: bold !important;
    color: var(--text-secondary) !important;
    letter-spacing: 0.1em;
}

.breadcrumb-ellipsis:hover[b-s1tqyfix7q] {
    color: var(--text-primary) !important;
    background: var(--bg-secondary) !important;
}

/* Truncated item indicator */
.breadcrumb-item.truncated a[b-s1tqyfix7q] {
    font-style: italic;
    opacity: 0.85;
}

.breadcrumb-item.truncated a:hover[b-s1tqyfix7q] {
    opacity: 1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .breadcrumb[b-s1tqyfix7q] {
        font-size: 0.8rem;
    }
    
    .breadcrumb-item a[b-s1tqyfix7q] {
        padding: 2px 3px; /* Tighter padding on mobile */
        font-size: 0.8rem;
    }
    
    .breadcrumb-item.home-item a[b-s1tqyfix7q] {
        padding: 4px 5px; /* Tighter mobile padding */
        min-width: 28px; /* Smaller min-width for mobile */
    }
    
    .breadcrumb-item.home-item i[b-s1tqyfix7q] {
        font-size: 0.9rem; /* Smaller icon on mobile */
    }
    
    .breadcrumb-compact .breadcrumb-item:not(:last-child)[b-s1tqyfix7q]::after {
        margin: 0 0.15rem; /* Tighter margin on mobile */
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .breadcrumb[b-s1tqyfix7q] {
        font-size: 0.75rem;
    }
    
    .breadcrumb-item a[b-s1tqyfix7q] {
        padding: 1px 2px; /* Very tight on small phones */
        font-size: 0.75rem;
    }
    
    .breadcrumb-item.home-item a[b-s1tqyfix7q] {
        padding: 3px 4px; /* Very compact on very small screens */
        min-width: 26px;
    }
    
    .breadcrumb-item.home-item i[b-s1tqyfix7q] {
        font-size: 0.85rem; /* Smaller icon on very small screens */
    }
    
    .breadcrumb-compact .breadcrumb-item:not(:last-child)[b-s1tqyfix7q]::after {
        margin: 0 0.1rem; /* Minimal margin on very small screens */
        font-size: 0.7rem;
    }
}
/* /Shared/CloudStorageConfigModal.razor.rz.scp.css */
/* Modal Overlay */
.modal-overlay[b-wk08vb8yn1] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn-b-wk08vb8yn1 0.2s ease;
}

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

/* Modal Content */
.modal-content[b-wk08vb8yn1] {
    background: var(--bg-primary);
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 800px;
    width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-color);
    animation: slideIn-b-wk08vb8yn1 0.3s ease;
}

@keyframes slideIn-b-wk08vb8yn1 {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Modal Header */
.modal-header[b-wk08vb8yn1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0.75rem 0.75rem 0 0;
}

.modal-title[b-wk08vb8yn1] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.modal-title i[b-wk08vb8yn1] {
    color: var(--primary-color);
    font-size: 1.1rem;
}

.modal-close[b-wk08vb8yn1] {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

.modal-close:hover[b-wk08vb8yn1] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    transform: scale(1.05);
}

/* Modal Body */
.modal-body[b-wk08vb8yn1] {
    flex: 1;
    padding: 1.5rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) var(--bg-tertiary);
}

.modal-body[b-wk08vb8yn1]::-webkit-scrollbar {
    width: 8px;
}

.modal-body[b-wk08vb8yn1]::-webkit-scrollbar-track {
    background: var(--bg-tertiary);
    border-radius: 4px;
}

.modal-body[b-wk08vb8yn1]::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

/* Configuration Sections */
.config-section[b-wk08vb8yn1] {
    margin-bottom: 2rem;
}

.config-section:last-child[b-wk08vb8yn1] {
    margin-bottom: 0;
}

.section-title[b-wk08vb8yn1] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Form Styling */
.form-group[b-wk08vb8yn1] {
    margin-bottom: 1.25rem;
}

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

.form-group label[b-wk08vb8yn1] {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

.form-control[b-wk08vb8yn1] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

/* Form Control Select Dropdowns */
.form-control select[b-wk08vb8yn1],
select.form-control[b-wk08vb8yn1] {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
}

/* Theme-specific dropdown arrows for form-control selects */
:root[data-theme="dark"] .form-control select[b-wk08vb8yn1],
:root[data-theme="dark"] select.form-control[b-wk08vb8yn1],
:root:not([data-theme]) .form-control select[b-wk08vb8yn1],
:root:not([data-theme]) select.form-control[b-wk08vb8yn1] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

:root[data-theme="light"] .form-control select[b-wk08vb8yn1],
:root[data-theme="light"] select.form-control[b-wk08vb8yn1] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23374151' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e") !important;
}

.form-control:focus[b-wk08vb8yn1] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-color-rgb), 0.1);
}

.form-control:hover[b-wk08vb8yn1] {
    border-color: var(--primary-color-light);
}

/* Password Input Container */
.password-input-container[b-wk08vb8yn1] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-container .form-control[b-wk08vb8yn1] {
    padding-right: 3rem;
}

.password-toggle-btn[b-wk08vb8yn1] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease, background-color 0.2s ease;
    z-index: 1;
}

.password-toggle-btn:hover[b-wk08vb8yn1] {
    color: var(--primary-color);
    background-color: var(--bg-secondary);
}

.password-toggle-btn:focus[b-wk08vb8yn1] {
    outline: none;
    color: var(--primary-color);
    background-color: var(--bg-secondary);
}

.form-help[b-wk08vb8yn1] {
    display: block;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Form Rows */
.form-row[b-wk08vb8yn1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

@media (max-width: 768px) {
    .form-row[b-wk08vb8yn1] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}

/* Checkbox Styling */
.checkbox-label[b-wk08vb8yn1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 500;
    color: var(--text-primary);
    padding: 0.5rem 0;
}

.checkbox-label input[type="checkbox"][b-wk08vb8yn1] {
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    appearance: none;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox-label input[type="checkbox"]:checked[b-wk08vb8yn1] {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.checkbox-label input[type="checkbox"]:checked[b-wk08vb8yn1]::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 0.9rem;
    font-weight: bold;
}

.checkbox-label input[type="checkbox"]:hover[b-wk08vb8yn1] {
    border-color: var(--primary-color);
}

/* Proxy Sections */
.proxy-section[b-wk08vb8yn1] {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.proxy-section h5[b-wk08vb8yn1] {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.proxy-details[b-wk08vb8yn1] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color);
}

/* Loading States */
.loading-container[b-wk08vb8yn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.loading-spinner[b-wk08vb8yn1] {
    width: 2.5rem;
    height: 2.5rem;
    border: 3px solid var(--bg-tertiary);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-wk08vb8yn1 1s linear infinite;
    margin-bottom: 1rem;
}

@keyframes spin-b-wk08vb8yn1 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Error States */
.error-state[b-wk08vb8yn1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    text-align: center;
}

.error-icon[b-wk08vb8yn1] {
    font-size: 3rem;
    color: var(--danger-color);
    margin-bottom: 1rem;
}

.error-state h3[b-wk08vb8yn1] {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
}

.error-state p[b-wk08vb8yn1] {
    margin: 0;
    color: var(--text-secondary);
    max-width: 400px;
}

/* Modal Footer */
.modal-footer[b-wk08vb8yn1] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.5rem;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
    border-radius: 0 0 0.75rem 0.75rem;
}

/* Button Styling */
.btn[b-wk08vb8yn1] {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    min-width: auto;
}

.btn:disabled[b-wk08vb8yn1] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

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

.btn-primary:hover:not(:disabled)[b-wk08vb8yn1] {
    background-color: var(--primary-color-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-color-rgb), 0.3);
}

.btn-secondary[b-wk08vb8yn1] {
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-wk08vb8yn1] {
    background-color: var(--bg-quaternary);
    color: var(--text-primary);
    border-color: var(--primary-color-light);
}

.btn-outline[b-wk08vb8yn1] {
    background-color: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.btn-outline:hover:not(:disabled)[b-wk08vb8yn1] {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-content[b-wk08vb8yn1] {
        width: 95vw;
        max-height: 95vh;
        margin: 1rem;
    }
    
    .modal-header[b-wk08vb8yn1] {
        padding: 1rem;
    }
    
    .modal-title[b-wk08vb8yn1] {
        font-size: 1.1rem;
    }
    
    .modal-body[b-wk08vb8yn1] {
        padding: 1rem;
    }
    
    .modal-footer[b-wk08vb8yn1] {
        padding: 1rem;
        flex-direction: column-reverse;
        gap: 0.5rem;
    }
    
    .btn[b-wk08vb8yn1] {
        width: 100%;
        justify-content: center;
    }
}

/* Dark theme adjustments - use data-theme attribute only */
:root[data-theme="dark"] .modal-overlay[b-wk08vb8yn1] {
    background-color: rgba(0, 0, 0, 0.5);
}
/* /Shared/ConfirmationModal.razor.rz.scp.css */
/* Confirmation Modal Styles */
.modal[b-4gik63zgbm] {
    z-index: 1060;
}

.modal-backdrop[b-4gik63zgbm] {
    z-index: 1055;
}

.modal-content[b-4gik63zgbm] {
    border-radius: 8px;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    background: var(--bg-primary);
    color: var(--text-primary);
}

.modal-header[b-4gik63zgbm] {
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
}

.modal-title[b-4gik63zgbm] {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 0;
    display: flex;
    align-items: center;
}

.modal-body[b-4gik63zgbm] {
    padding: 1.5rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.modal-footer[b-4gik63zgbm] {
    border-top: 1px solid var(--border-color);
    background: var(--bg-primary);
    padding: 1rem 1.5rem;
}

.btn-close[b-4gik63zgbm] {
    filter: var(--btn-close-filter, invert(1));
    opacity: 0.6;
}

.btn-close:hover[b-4gik63zgbm] {
    opacity: 1;
}

/* Alert styling within modal */
.modal .alert[b-4gik63zgbm] {
    border: none;
    border-radius: 6px;
    margin-bottom: 0;
}

.modal .alert-info[b-4gik63zgbm] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    color: var(--primary-color);
}

.modal .alert-warning[b-4gik63zgbm] {
    background: rgba(255, 193, 7, 0.1);
    color: #f57c00;
}

.modal .alert-danger[b-4gik63zgbm] {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

/* Dark mode adjustments */
:global([data-theme="dark"]) .modal-content[b-4gik63zgbm],
:global([data-theme="dark"]) .modal-header[b-4gik63zgbm],
:global([data-theme="dark"]) .modal-body[b-4gik63zgbm],
:global([data-theme="dark"]) .modal-footer[b-4gik63zgbm] {
    background: var(--bg-primary);
    color: var(--text-primary);
}

:global([data-theme="dark"]) .btn-close[b-4gik63zgbm] {
    filter: invert(1);
}
/* /Shared/CreateEncryptedFolderModal.razor.rz.scp.css */
.modal-overlay[b-0pen5hsggs] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.create-folder-modal[b-0pen5hsggs] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 450px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn-b-0pen5hsggs 0.2s ease-out;
}

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

.modal-header[b-0pen5hsggs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-0pen5hsggs] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-header h3 i[b-0pen5hsggs] {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

.modal-close-btn[b-0pen5hsggs] {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-0pen5hsggs] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-content[b-0pen5hsggs] {
    padding: 1.5rem;
    /* Remove bottom shadow to match Search modal */
    box-shadow: none !important;
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.form-group[b-0pen5hsggs] {
    margin-bottom: 1rem;
}

.form-group label[b-0pen5hsggs] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.form-control[b-0pen5hsggs] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus[b-0pen5hsggs] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

/* Password input container with toggle button */
.password-input-container[b-0pen5hsggs] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-container .form-control[b-0pen5hsggs] {
    padding-right: 3rem;
}

.password-toggle-btn[b-0pen5hsggs] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 3px;
    transition: color 0.2s ease;
    z-index: 10;
}

.password-toggle-btn:hover[b-0pen5hsggs] {
    color: var(--text-primary);
}

/* Checkbox styling */
.checkbox-label[b-0pen5hsggs] {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.checkbox-label input[type="checkbox"][b-0pen5hsggs] {
    margin-right: 0.5rem;
    transform: scale(1.1);
}

.form-text[b-0pen5hsggs] {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.password-warning[b-0pen5hsggs] {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem;
    background: rgba(255, 193, 7, 0.1);
    border: 1px solid rgba(255, 193, 7, 0.3);
    border-radius: 4px;
    color: var(--warning-color);
    margin-bottom: 1rem;
}

.password-warning i[b-0pen5hsggs] {
    margin-right: 0.75rem;
    font-size: 1.1rem;
    margin-top: 0.1rem;
    flex-shrink: 0;
}

.password-warning strong[b-0pen5hsggs] {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.password-warning p[b-0pen5hsggs] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.error-message[b-0pen5hsggs] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    color: #dc3545;
    margin-top: 1rem;
}

.error-message i[b-0pen5hsggs] {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.error-message p[b-0pen5hsggs] {
    margin: 0;
    font-size: 0.9rem;
}

.modal-footer[b-0pen5hsggs] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.btn[b-0pen5hsggs] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

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

.btn i[b-0pen5hsggs] {
    margin-right: 0.5rem;
}

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

.btn-primary:hover:not(:disabled)[b-0pen5hsggs] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary[b-0pen5hsggs] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-0pen5hsggs] {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}

/* Responsive design */
@media (max-width: 576px) {
    /* Ensure modal appears below the app's top nav on iPhone and small screens */
    .modal-overlay[b-0pen5hsggs] {
        align-items: flex-start;
        height: 100dvh;
    /* Let the modal handle vertical spacing to avoid double-counting */
    padding-top: env(safe-area-inset-top);
    padding-bottom: 0;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        box-sizing: border-box;
    }

    .create-folder-modal[b-0pen5hsggs] {
        width: 95%;
    margin: 0;
    /* Position below header with a small gap and safe-area bottom */
    margin-top: calc(var(--header-height, 60px) + 0.5rem);
    margin-bottom: max(0.5rem, env(safe-area-inset-bottom));
    /* Constrain height to visible viewport minus header and margins */
    max-height: calc(100dvh - (var(--header-height, 60px) + env(safe-area-inset-top) + max(0.5rem, env(safe-area-inset-bottom)) + 0.5rem));
    }

    .modal-header[b-0pen5hsggs],
    .modal-content[b-0pen5hsggs],
    .modal-footer[b-0pen5hsggs] {
        padding: 1rem;
    }

    /* Keep footer buttons on one line on mobile */
    .modal-footer[b-0pen5hsggs] {
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .modal-footer .btn[b-0pen5hsggs] {
        min-width: 0;
        flex: 1 1 0;
    }
}
/* /Shared/CreateFolderModal.razor.rz.scp.css */
.modal-overlay[b-kgpklvumwn] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.create-folder-modal[b-kgpklvumwn] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    width: 90%;
    max-width: 400px;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-kgpklvumwn 0.2s ease-out;
}

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

.modal-header[b-kgpklvumwn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h3[b-kgpklvumwn] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-header h3 i[b-kgpklvumwn] {
    color: var(--primary-color);
    margin-right: 0.5rem;
}

.modal-close-btn[b-kgpklvumwn] {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-kgpklvumwn] {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.modal-content[b-kgpklvumwn] {
    padding: 1.5rem;
    /* Remove bottom shadow to match Search modal */
    box-shadow: none !important;
}

.form-group[b-kgpklvumwn] {
    margin-bottom: 1rem;
}

.form-group label[b-kgpklvumwn] {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-weight: 500;
}

.form-control[b-kgpklvumwn] {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--input-background);
    color: var(--text-primary);
    font-size: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus[b-kgpklvumwn] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.error-message[b-kgpklvumwn] {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: rgba(220, 53, 69, 0.1);
    border: 1px solid rgba(220, 53, 69, 0.3);
    border-radius: 4px;
    color: #dc3545;
    margin-top: 1rem;
}

.error-message i[b-kgpklvumwn] {
    margin-right: 0.5rem;
    font-size: 1rem;
}

.error-message p[b-kgpklvumwn] {
    margin: 0;
    font-size: 0.9rem;
}

.modal-footer[b-kgpklvumwn] {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.btn[b-kgpklvumwn] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 80px;
}

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

.btn i[b-kgpklvumwn] {
    margin-right: 0.5rem;
}

.btn-primary[b-kgpklvumwn] {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover:not(:disabled)[b-kgpklvumwn] {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--primary-color-light);
}

.btn-secondary[b-kgpklvumwn] {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover:not(:disabled)[b-kgpklvumwn] {
    background: var(--bg-hover);
    border-color: var(--border-color);
}

/* Responsive design */
@media (max-width: 480px) {
    .create-folder-modal[b-kgpklvumwn] {
        width: 95%;
        margin: 1rem;
    }
    
    .modal-header[b-kgpklvumwn],
    .modal-content[b-kgpklvumwn],
    .modal-footer[b-kgpklvumwn] {
        padding: 1rem;
    }
    
    .modal-footer[b-kgpklvumwn] {
        flex-direction: column;
    }
    
    .btn[b-kgpklvumwn] {
        width: 100%;
    }
}
/* /Shared/DeleteConfirmationModal.razor.rz.scp.css */
/* DeleteConfirmationModal.razor.css */

.modal[b-1qnmnf0fsk] {
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-content[b-1qnmnf0fsk] {
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    box-shadow: var(--bs-box-shadow-lg);
}

.modal-header[b-1qnmnf0fsk] {
    background-color: var(--bs-light);
    border-bottom: 1px solid var(--bs-border-color);
}

.modal-header .modal-title[b-1qnmnf0fsk] {
    font-weight: 600;
    color: var(--bs-body-color);
}

.modal-header .btn-close[b-1qnmnf0fsk] {
    opacity: 0.8;
}

.modal-header .btn-close:hover[b-1qnmnf0fsk] {
    opacity: 1;
}

.modal-body[b-1qnmnf0fsk] {
    padding: 1.5rem;
}

.files-to-delete[b-1qnmnf0fsk] {
    margin: 1rem 0;
}

.file-list[b-1qnmnf0fsk] {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
    padding: 0.75rem;
    background-color: var(--bs-light);
}

.file-item[b-1qnmnf0fsk] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.file-item:last-child[b-1qnmnf0fsk] {
    border-bottom: none;
}

.file-name[b-1qnmnf0fsk] {
    flex: 1;
    margin-right: 1rem;
    word-break: break-word;
}

.file-size[b-1qnmnf0fsk] {
    font-size: 0.875rem;
    color: var(--bs-secondary-color);
    white-space: nowrap;
}

.more-files[b-1qnmnf0fsk] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--bs-secondary-color);
    font-style: italic;
}

.delete-options[b-1qnmnf0fsk] {
    padding: 1rem;
    background-color: var(--bs-light);
    border: 1px solid var(--bs-border-color);
    border-radius: 0.375rem;
}

.form-check-input:checked[b-1qnmnf0fsk] {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.form-check-input:focus[b-1qnmnf0fsk] {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), 0.25);
}

.form-check-label[b-1qnmnf0fsk] {
    font-weight: 500;
    color: var(--bs-danger);
}

.form-text[b-1qnmnf0fsk] {
    color: var(--bs-secondary-color);
    font-size: 0.875rem;
    margin-top: 0.25rem;
}

.alert[b-1qnmnf0fsk] {
    border: none;
    border-radius: 0.375rem;
}

.alert-warning[b-1qnmnf0fsk] {
    background-color: rgba(var(--bs-warning-rgb), 0.1);
    color: var(--bs-warning-text-emphasis);
}

.alert-danger[b-1qnmnf0fsk] {
    background-color: rgba(var(--bs-danger-rgb), 0.1);
    color: var(--bs-danger-text-emphasis);
}

.modal-footer[b-1qnmnf0fsk] {
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
}

.btn[b-1qnmnf0fsk] {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
}

.btn-danger[b-1qnmnf0fsk] {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
}

.btn-danger:hover:not(:disabled)[b-1qnmnf0fsk] {
    background-color: var(--bs-danger);
    border-color: var(--bs-danger);
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn-secondary[b-1qnmnf0fsk] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: white;
}

.btn-secondary:hover:not(:disabled)[b-1qnmnf0fsk] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    opacity: 0.9;
}

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

.spinner-border-sm[b-1qnmnf0fsk] {
    width: 1rem;
    height: 1rem;
}

.badge[b-1qnmnf0fsk] {
    font-size: 0.75rem;
}

/* Icon colors */
.text-purple[b-1qnmnf0fsk] {
    color: #6f42c1 !important;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .modal-dialog[b-1qnmnf0fsk] {
        margin: 1rem;
    }
    
    .modal-body[b-1qnmnf0fsk] {
        padding: 1rem;
    }
    
    .modal-footer[b-1qnmnf0fsk] {
        padding: 0.75rem 1rem;
    }
    
    .file-item[b-1qnmnf0fsk] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .file-size[b-1qnmnf0fsk] {
        align-self: flex-end;
        margin-top: 0.25rem;
    }
}

/* Light theme explicit support */
[data-bs-theme="light"] .modal-content[b-1qnmnf0fsk] {
    background: white;
    color: #212529;
}

[data-bs-theme="light"] .modal-header[b-1qnmnf0fsk] {
    background: #f8f9fa;
    border-color: #dee2e6;
}

[data-bs-theme="light"] .file-list[b-1qnmnf0fsk],
[data-bs-theme="light"] .delete-options[b-1qnmnf0fsk] {
    background: #f8f9fa;
    border-color: #dee2e6;
}

/* Dark theme support - use data-theme attribute only */
:root[data-theme="dark"] .modal-backdrop[b-1qnmnf0fsk] {
    background-color: rgba(0, 0, 0, 0.7);
}

:root[data-theme="dark"] .modal-content[b-1qnmnf0fsk] {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color-translucent);
    color: var(--bs-light);
}

:root[data-theme="dark"] .modal-header[b-1qnmnf0fsk] {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color-translucent);
}

:root[data-theme="dark"] .file-list[b-1qnmnf0fsk],
:root[data-theme="dark"] .delete-options[b-1qnmnf0fsk] {
    background-color: var(--bs-dark);
    border-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .modal-content[b-1qnmnf0fsk] {
    background: #212529;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .modal-header[b-1qnmnf0fsk] {
    background: #212529;
    border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .file-list[b-1qnmnf0fsk],
[data-bs-theme="dark"] .delete-options[b-1qnmnf0fsk] {
    background: #212529;
    border-color: rgba(255, 255, 255, 0.15);
}
/* /Shared/FolderSelectorModal.razor.rz.scp.css */
/* Folder Selector Modal Styles - Compact Design */

/* Modal Overlay */
.modal-overlay[b-6qke0xiwaw] {
    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: 10001; /* Higher than AddBackupWizard modal (9999) and dropdown (10000) */
    backdrop-filter: none;
    padding: 0.5rem;
    /* Safe area padding for mobile */
    padding-top: max(0.5rem, env(safe-area-inset-top));
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
}

.folder-selector-modal[b-6qke0xiwaw] {
    background: var(--card-background);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 85vh;
    height: 90vh; /* Fix height to prevent flicker when folder count changes */
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

/* Modal Header - Original Design */
.folder-selector-modal .modal-header[b-6qke0xiwaw] {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
    color: white;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.folder-selector-modal .modal-header h3[b-6qke0xiwaw] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
}

.btn-close[b-6qke0xiwaw] {
    background: none;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
}

.btn-close:hover[b-6qke0xiwaw] {
    background: rgba(255, 255, 255, 0.2);
}

/* Modal Content - Maximized for file list */
.folder-selector-modal .modal-content[b-6qke0xiwaw] {
    flex: 1;
    padding: 0.375rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    box-shadow: none;
    border: none;
}

/* Loading State */
.loading-container[b-6qke0xiwaw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 0.5rem;
    color: var(--text-muted);
}

.loading-spinner[b-6qke0xiwaw] {
    font-size: 1.25rem;
    color: var(--primary-color);
}

.loading-container p[b-6qke0xiwaw] {
    font-size: 0.8rem;
    margin: 0;
}

/* Ultra Compact Breadcrumb Container */
.breadcrumb-container.compact[b-6qke0xiwaw] {
    margin-bottom: 0.375rem;
    padding: 0.25rem 0.375rem;
    background: var(--bg-secondary);
    border-radius: 4px;
    border: 1px solid var(--border-color);
    font-size: 0.7rem;
}

/* Folder List Container - Maximized */
.folder-list-container[b-6qke0xiwaw] {
    flex: 1;
    overflow-y: auto;
    border: none;
    border-radius: 4px;
    background: var(--card-background);
    min-height: 300px;
    box-shadow: none;
}

.folder-list[b-6qke0xiwaw] {
    display: flex;
    flex-direction: column;
}

/* Empty State - More Compact */
.empty-folder[b-6qke0xiwaw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    color: var(--text-muted);
    min-height: 120px;
}

.empty-folder i[b-6qke0xiwaw] {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.empty-folder p[b-6qke0xiwaw] {
    font-size: 0.8rem;
    margin: 0;
}

/* Folder Items - More Compact */
.folder-item[b-6qke0xiwaw] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.375rem 0.5rem;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.375rem;
    min-height: 36px;
}

.folder-item:last-child[b-6qke0xiwaw] {
    border-bottom: none;
}

.folder-item:hover[b-6qke0xiwaw] {
    background: var(--primary-color-light);
    border-color: var(--primary-color);
}

.folder-item.selected[b-6qke0xiwaw] {
    background: var(--primary-color-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.folder-item.new-folder-item[b-6qke0xiwaw] {
    background: var(--success-color-light);
    border-color: var(--success-color);
    cursor: default;
}

.folder-item.new-folder-item:hover[b-6qke0xiwaw] {
    background: var(--success-color-light);
}

/* Up folder item styling */
.folder-item.up-folder[b-6qke0xiwaw] {
    background: var(--secondary-bg);
    border-color: var(--border-color);
    color: var(--text-color);
}

.folder-item.up-folder:hover[b-6qke0xiwaw] {
    background: var(--hover-bg);
    border-color: var(--primary-color);
}

.folder-item.up-folder .folder-icon[b-6qke0xiwaw] {
    background: var(--primary-color-light);
    color: var(--primary-color);
}

.folder-item.up-folder:hover .folder-icon[b-6qke0xiwaw] {
    background: var(--primary-color);
    color: white;
}

.folder-item.up-folder .folder-name[b-6qke0xiwaw] {
    font-weight: 600;
    font-style: italic;
    color: var(--text-color-muted);
}

.folder-item.up-folder:hover .folder-name[b-6qke0xiwaw] {
    color: var(--text-color);
}

/* More Compact Folder Icon */
.folder-icon[b-6qke0xiwaw] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--primary-color-light);
    border-radius: 4px;
    color: var(--primary-color);
    font-size: 0.8rem;
    flex-shrink: 0;
}

.folder-item.new-folder-item .folder-icon[b-6qke0xiwaw] {
    background: var(--success-color-light);
    color: var(--success-color);
}

/* More Compact Folder Name */
.folder-name[b-6qke0xiwaw] {
    flex: 1;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-primary);
    min-width: 0;
    word-break: break-word;
    text-align: left;
    line-height: 1.2;
}

/* New Folder Input - More Compact */
.new-folder-input[b-6qke0xiwaw] {
    width: 100%;
    padding: 0.2rem 0.3rem;
    border: 1px solid var(--success-color);
    border-radius: 3px;
    font-size: 0.75rem;
    background: var(--card-background);
    color: var(--text-primary);
    outline: none;
    min-height: 24px;
}

.new-folder-input:focus[b-6qke0xiwaw] {
    border-color: var(--success-color);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1);
}

/* Folder Actions for new folder creation only */
.folder-actions[b-6qke0xiwaw] {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.action-btn[b-6qke0xiwaw] {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 24px;
    height: 24px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
}

.action-btn:hover:not(:disabled)[b-6qke0xiwaw] {
    background: var(--hover-bg);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.action-btn:disabled[b-6qke0xiwaw] {
    cursor: not-allowed;
    opacity: 0.5;
}

.action-btn.confirm-btn:hover:not(:disabled)[b-6qke0xiwaw] {
    background: var(--success-color-light);
    border-color: var(--success-color);
    color: var(--success-color);
}

.action-btn.cancel-btn:hover:not(:disabled)[b-6qke0xiwaw] {
    background: var(--error-color-light);
    border-color: var(--error-color);
    color: var(--error-color);
}

/* Empty Folder Message */
.empty-folder[b-6qke0xiwaw] {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    pointer-events: none;
}

.confirm-btn:disabled[b-6qke0xiwaw] {
    border-color: var(--muted-color);
    color: var(--text-muted);
    background: var(--bg-secondary);
}

.confirm-btn[b-6qke0xiwaw] {
    border-color: var(--success-color);
    color: var(--success-color);
}

.confirm-btn:hover:not(:disabled)[b-6qke0xiwaw] {
    background: var(--success-color-light);
    border-color: var(--success-color);
    color: var(--success-color);
}

.cancel-btn[b-6qke0xiwaw] {
    border-color: var(--danger-color);
    color: var(--danger-color);
}

.cancel-btn:hover:not(:disabled)[b-6qke0xiwaw] {
    background: var(--danger-color-light);
    border-color: var(--danger-color);
    color: var(--danger-color);
}

/* Error Message - Compact */
.error-message[b-6qke0xiwaw] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem;
    background: var(--danger-color-light);
    border: 1px solid var(--danger-color);
    border-radius: 4px;
    color: var(--danger-color);
    font-size: 0.8rem;
    margin-top: 0.5rem;
}

.error-message i[b-6qke0xiwaw] {
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Compact Modal Footer */
.folder-selector-modal .modal-footer.compact[b-6qke0xiwaw] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: none;
    background: var(--card-background);
    flex-shrink: 0;
}

/* Compact Save Last Selected Section */
.save-last-selected.compact[b-6qke0xiwaw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--bg-tertiary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.save-last-selected.compact .checkbox-label.compact[b-6qke0xiwaw] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.75rem;
    margin: 0;
}

.save-last-selected.compact .checkbox-label.compact span[b-6qke0xiwaw] {
    white-space: nowrap;
}

.save-last-selected.compact input[type="checkbox"][b-6qke0xiwaw] {
    margin: 0;
    cursor: pointer;
    transform: scale(0.9);
}

.save-last-selected.compact .go-to-last-btn[b-6qke0xiwaw] {
    margin-left: auto;
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
}

/* Compact Footer Actions Container */
.footer-actions.compact[b-6qke0xiwaw] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.left-actions[b-6qke0xiwaw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.right-actions[b-6qke0xiwaw] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Compact Action Buttons */
.folder-selector-modal .modal-footer .btn[b-6qke0xiwaw] {
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 32px;
}

.btn-xs[b-6qke0xiwaw] {
    padding: 0.25rem 0.5rem;
    font-size: 0.7rem;
    min-height: 28px;
}

.btn-sm[b-6qke0xiwaw] {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
    min-height: 32px;
}

.btn-create[b-6qke0xiwaw] {
    background: var(--success-color);
    color: white;
}

.btn-create:hover:not(:disabled)[b-6qke0xiwaw] {
    background: var(--success-color-dark, #16a34a);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

.btn-create:disabled[b-6qke0xiwaw] {
    background: var(--muted-color);
    color: var(--text-muted);
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-secondary[b-6qke0xiwaw] {
    background: var(--muted-color);
    color: var(--text-primary);
}

.btn-secondary:hover[b-6qke0xiwaw] {
    background: var(--muted-color-dark, #6b7280);
    transform: translateY(-1px);
}

.btn-primary[b-6qke0xiwaw] {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover[b-6qke0xiwaw] {
    background: var(--primary-color-dark, #2563eb);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);
}

.btn-outline[b-6qke0xiwaw] {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
}

.btn-outline:hover[b-6qke0xiwaw] {
    background: var(--primary-color-light);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 768px) {
    .modal-overlay[b-6qke0xiwaw] {
        /* Additional mobile spacing for navigation bars */
        padding-top: max(4rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        align-items: flex-start;
        padding-top: 4rem; /* Space for mobile navigation */
    }
    
    .folder-selector-modal[b-6qke0xiwaw] {
    width: 95%;
    max-height: calc(90vh - 4rem); /* Account for nav space */
    height: calc(90vh - 4rem); /* Fix height to avoid flicker on tablets/landscape phones */
        margin-top: 0;
    }
    
    .folder-selector-modal .modal-header[b-6qke0xiwaw] {
        padding: 0.5rem;
    }
    
    .folder-selector-modal .modal-header h3[b-6qke0xiwaw] {
        font-size: 0.875rem;
    }
    
    .folder-selector-modal .modal-content[b-6qke0xiwaw] {
        padding: 0.25rem;
    }
    
    .breadcrumb-container.compact[b-6qke0xiwaw] {
        margin-bottom: 0.25rem;
        padding: 0.2rem 0.3rem;
        font-size: 0.65rem;
    }
    
    .folder-selector-modal .modal-footer.compact[b-6qke0xiwaw] {
        padding: 0.375rem;
        gap: 0.25rem;
    }
    
    .save-last-selected.compact[b-6qke0xiwaw] {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.375rem;
        padding: 0.25rem;
    }
    
    .save-last-selected.compact .go-to-last-btn[b-6qke0xiwaw] {
        margin-left: 0;
        align-self: flex-start;
    }
    
    .folder-item[b-6qke0xiwaw] {
        padding: 0.25rem 0.375rem;
        min-height: 32px;
        gap: 0.25rem;
    }
    
    .folder-icon[b-6qke0xiwaw] {
        width: 24px;
        height: 24px;
        font-size: 0.7rem;
    }
    
    .folder-name[b-6qke0xiwaw] {
        font-size: 0.7rem;
        line-height: 1.1;
    }
    
    .action-btn[b-6qke0xiwaw] {
        width: 20px;
        height: 20px;
        font-size: 0.6rem;
    }
    
    .new-folder-input[b-6qke0xiwaw] {
        font-size: 0.7rem;
        padding: 0.15rem 0.25rem;
        min-height: 20px;
    }
}

@media (max-width: 480px) {
    .modal-overlay[b-6qke0xiwaw] {
        /* More aggressive mobile spacing - ensure full viewport usage */
        padding: 0.5rem;
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
        align-items: flex-start;
        /* Ensure overlay uses full viewport */
        height: 100vh;
        height: 100dvh; /* Use dynamic viewport height on supported browsers */
    }
    
    .folder-selector-modal[b-6qke0xiwaw] {
        width: 100%;
        max-width: none;
        margin: 0;
        /* Use viewport-relative height with safe areas */
        height: calc(100vh - 2rem);
        height: calc(100dvh - 2rem);
        max-height: calc(100vh - 2rem);
        max-height: calc(100dvh - 2rem);
        /* Ensure proper flex layout for scrollable content */
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .folder-selector-modal .modal-header[b-6qke0xiwaw] {
        padding: 0.375rem;
        flex-shrink: 0; /* Prevent header from shrinking */
    }
    
    .folder-selector-modal .modal-header h3[b-6qke0xiwaw] {
        font-size: 0.8rem;
    }
    
    .folder-selector-modal .modal-content[b-6qke0xiwaw] {
        padding: 0.2rem;
        flex: 1; /* Take remaining space */
        overflow: hidden; /* Prevent content overflow */
        display: flex;
        flex-direction: column;
        min-height: 0; /* Allow flex shrinking */
    }
    
    /* Ensure folder list container is scrollable */
    .folder-list-container[b-6qke0xiwaw] {
        flex: 1;
        overflow-y: auto;
        /* iOS-specific smooth scrolling */
        -webkit-overflow-scrolling: touch;
        min-height: 200px; /* Minimum height to ensure usability */
    }
    
    .breadcrumb-container.compact[b-6qke0xiwaw] {
        margin-bottom: 0.2rem;
        padding: 0.15rem 0.25rem;
        font-size: 0.6rem;
        flex-shrink: 0; /* Don't let breadcrumb shrink */
    }
    
    /* Ensure footer is always visible and properly positioned */
    .folder-selector-modal .modal-footer.compact[b-6qke0xiwaw] {
        flex-shrink: 0; /* Prevent footer from shrinking */
        padding: 0.5rem;
        border-top: 1px solid var(--border-color);
        background: var(--card-background);
        /* Add slight shadow to indicate it's above content */
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .folder-item[b-6qke0xiwaw] {
        padding: 0.2rem 0.25rem;
        min-height: 28px;
        gap: 0.2rem;
    }
    
    .folder-icon[b-6qke0xiwaw] {
        width: 20px;
        height: 20px;
        font-size: 0.65rem;
        border-radius: 3px;
    }
    
    .folder-name[b-6qke0xiwaw] {
        font-size: 0.65rem;
        line-height: 1;
    }
    
    .action-btn[b-6qke0xiwaw] {
        width: 18px;
        height: 18px;
        font-size: 0.55rem;
        border-radius: 2px;
    }
    
    .new-folder-input[b-6qke0xiwaw] {
        font-size: 0.65rem;
        padding: 0.1rem 0.2rem;
        min-height: 18px;
    }
    
    .save-last-selected.compact[b-6qke0xiwaw] {
        flex-direction: row;
        gap: 0.25rem;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
    }
    
    .save-last-selected.compact .checkbox-label.compact[b-6qke0xiwaw] {
        font-size: 0.65rem;
        flex: 1;
        min-width: 0;
    }
    
    .save-last-selected.compact .go-to-last-btn[b-6qke0xiwaw] {
        font-size: 0.6rem;
        padding: 0.15rem 0.25rem;
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .footer-actions.compact[b-6qke0xiwaw] {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 0.5rem;
    }
    
    .left-actions[b-6qke0xiwaw] {
        order: 1;
        justify-content: flex-start;
        flex-shrink: 0;
        max-width: 25%;
    }
    
    .right-actions[b-6qke0xiwaw] {
        order: 2;
        justify-content: flex-end;
        gap: 0.25rem;
        flex-shrink: 0;
        max-width: 75%;
    }
    
    /* Create Folder button - show only icon on mobile */
    .left-actions .btn[b-6qke0xiwaw] {
        padding: 0.25rem;
        min-width: 28px;
        max-width: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
        overflow: hidden;
    }
    
    .left-actions .btn i[b-6qke0xiwaw] {
        font-size: 0.8rem !important;
        margin: 0 !important;
        text-indent: 0;
        position: relative;
        z-index: 1;
    }
    
    /* Action buttons - ultra compact on mobile */
    .right-actions .btn[b-6qke0xiwaw] {
        font-size: 0.6rem;
        padding: 0.25rem 0.375rem;
        min-width: auto;
        flex: none;
        white-space: nowrap;
    }
    
    .right-actions .btn i[b-6qke0xiwaw] {
        margin-right: 0.2rem;
        font-size: 0.65rem;
    }
}

/* Tooltip wrapper for disabled buttons */
.tooltip-wrapper[b-6qke0xiwaw] {
    display: inline-block;
    cursor: not-allowed;
}

.tooltip-wrapper button:disabled[b-6qke0xiwaw] {
    pointer-events: none;
}

/* iPhone-specific optimizations for better modal handling */
@media (max-width: 430px) and (-webkit-min-device-pixel-ratio: 2) {
    /* Target iPhone devices specifically */
    .modal-overlay[b-6qke0xiwaw] {
        /* Use the full viewport on iPhone */
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0.5rem;
        /* Use safe area insets for iPhone notch/home indicator */
        padding-top: max(0.5rem, env(safe-area-inset-top));
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        /* Ensure proper height calculation */
        height: 100vh;
        height: 100dvh;
        overflow: hidden;
    }
    
    .folder-selector-modal[b-6qke0xiwaw] {
        /* Use almost full screen on iPhone */
        width: 100%;
        height: calc(100vh - 1rem);
        height: calc(100dvh - 1rem);
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
        border-radius: 12px 12px 0 0; /* Round only top corners like native iOS */
        margin: 0;
        /* Ensure scrolling works properly */
        overflow: hidden;
        position: relative;
    }
    
    /* Ensure modal content area can scroll properly */
    .folder-selector-modal .modal-content[b-6qke0xiwaw] {
        /* Force proper flex behavior on iPhone */
        overflow: hidden;
        height: 100%;
    }
    
    .folder-list-container[b-6qke0xiwaw] {
        /* Ensure touch scrolling works on iPhone */
        -webkit-overflow-scrolling: touch;
        overflow-y: auto;
        /* Reserve space for footer */
        margin-bottom: 0;
        padding-bottom: 1rem;
    }
    
    /* Make touch targets larger for iPhone */
    .folder-item[b-6qke0xiwaw] {
        min-height: 44px; /* iOS recommended touch target size */
        padding: 0.5rem;
    }
    
    .action-btn[b-6qke0xiwaw] {
        min-width: 44px;
        min-height: 44px;
    }
    
    .folder-selector-modal .modal-footer.compact .btn[b-6qke0xiwaw] {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }
}
/* /Shared/GlobalErrorModal.razor.rz.scp.css */
.modal-overlay[b-200b8f6kfi] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    backdrop-filter: none;
}

.error-modal[b-200b8f6kfi] {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    animation: modalSlideIn-b-200b8f6kfi 0.2s ease-out;
}

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

.error-header[b-200b8f6kfi] {
    background-color: var(--bs-danger);
    color: white;
    border-bottom: none;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.error-header h3[b-200b8f6kfi] {
    margin: 0;
    font-size: 1.2rem;
}

.modal-close-btn[b-200b8f6kfi] {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.modal-close-btn:hover[b-200b8f6kfi] {
    background-color: rgba(255, 255, 255, 0.2);
}

.error-content[b-200b8f6kfi] {
    text-align: center;
    padding: 2rem 1.5rem;
}

.error-icon[b-200b8f6kfi] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.error-message h4[b-200b8f6kfi] {
    color: var(--bs-dark);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.error-message p[b-200b8f6kfi] {
    color: var(--bs-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.error-suggestions[b-200b8f6kfi] {
    text-align: left;
    background-color: var(--bs-light);
    padding: 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
}

.error-suggestions h5[b-200b8f6kfi] {
    color: var(--bs-dark);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.error-suggestions ul[b-200b8f6kfi] {
    margin: 0;
    padding-left: 1.2rem;
}

.error-suggestions li[b-200b8f6kfi] {
    color: var(--bs-secondary);
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.error-footer[b-200b8f6kfi] {
    border-top: 1px solid var(--bs-border-color);
    background-color: var(--bs-light);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}
/* /Shared/LanguageSwitcher.razor.rz.scp.css */
/* Language Switcher Styles */

.language-switcher .flag-icon[b-0yurzmw9ob] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
}

/* Flag icons from flag-icons library */
.language-switcher .flag-icon .fi[b-0yurzmw9ob] {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* FontAwesome globe icon */
.language-switcher .flag-icon .fas[b-0yurzmw9ob] {
    font-size: 1rem;
    color: var(--text-primary);
}

.language-switcher .language-btn[b-0yurzmw9ob] {
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s ease;
    border: none;
    background: transparent;
}

.language-switcher .language-btn:hover[b-0yurzmw9ob] {
    background: var(--bg-secondary);
    color: var(--primary-color);
}

.language-switcher .language-btn:focus[b-0yurzmw9ob] {
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
    color: var(--text-primary);
}

.language-switcher .dropdown-menu[b-0yurzmw9ob] {
    min-width: 150px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.language-switcher .dropdown-item[b-0yurzmw9ob] {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
}

.language-switcher .dropdown-item:hover[b-0yurzmw9ob] {
    background: var(--bg-secondary);
    color: var(--primary-color);
}

.language-switcher .dropdown-item.active[b-0yurzmw9ob] {
    background: var(--primary-color);
    color: white;
}

.language-switcher .dropdown-item .flag-icon[b-0yurzmw9ob] {
    margin-right: 0.5rem;
    flex-shrink: 0;
}

/* Ensure flag icons maintain quality in different themes */
[data-theme="dark"] .language-switcher .flag-icon .fi[b-0yurzmw9ob] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .language-switcher .flag-icon .fas[b-0yurzmw9ob] {
    color: var(--text-primary);
}
/* /Shared/LogoutConfirmationModal.razor.rz.scp.css */
.logout-options[b-laonkez02f] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.logout-option[b-laonkez02f] {
    padding: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.logout-option:hover[b-laonkez02f] {
    background-color: var(--bg-secondary);
    border-color: var(--primary-color);
}

.logout-option .form-check[b-laonkez02f] {
    margin-bottom: 0.5rem;
}

.logout-option .form-check-label[b-laonkez02f] {
    font-size: 1.1rem;
    color: var(--text-primary);
    cursor: pointer;
}

.logout-option .option-description[b-laonkez02f] {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0;
    margin-left: 1.5rem;
    line-height: 1.4;
}

.logout-option .form-check-input:checked + .form-check-label[b-laonkez02f] {
    color: var(--primary-color);
    font-weight: 600;
}

.logout-option .alert[b-laonkez02f] {
    margin-left: 1.5rem;
    font-size: 0.85rem;
}

.modal-header .modal-title[b-laonkez02f] {
    color: var(--text-primary);
}

.modal-header .modal-title i[b-laonkez02f] {
    color: var(--danger-color);
}

.btn-danger[b-laonkez02f] {
    background-color: var(--danger-color);
    border-color: var(--danger-color);
}

.btn-danger:hover[b-laonkez02f] {
    background-color: var(--danger-hover-color);
    border-color: var(--danger-hover-color);
}

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

/* Dark mode adjustments */
[data-theme="dark"] .logout-option[b-laonkez02f] {
    border-color: var(--border-color);
    background-color: var(--bg-primary);
}

[data-theme="dark"] .logout-option:hover[b-laonkez02f] {
    background-color: var(--bg-secondary);
    border-color: var(--primary-color);
}

[data-theme="dark"] .modal-content[b-laonkez02f] {
    background-color: var(--bg-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-header[b-laonkez02f] {
    border-color: var(--border-color);
}

[data-theme="dark"] .modal-footer[b-laonkez02f] {
    border-color: var(--border-color);
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-5io4z2chv1] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-5io4z2chv1] {
    flex: 1;
}

.sidebar[b-5io4z2chv1] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-5io4z2chv1] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-5io4z2chv1]  a, .top-row[b-5io4z2chv1]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-5io4z2chv1]  a:hover, .top-row[b-5io4z2chv1]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-5io4z2chv1]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row:not(.auth)[b-5io4z2chv1] {
        display: none;
    }

    .top-row.auth[b-5io4z2chv1] {
        justify-content: space-between;
    }

    .top-row[b-5io4z2chv1]  a, .top-row[b-5io4z2chv1]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-5io4z2chv1] {
        flex-direction: row;
    }

    .sidebar[b-5io4z2chv1] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-5io4z2chv1] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-5io4z2chv1]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-5io4z2chv1], article[b-5io4z2chv1] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Mobile responsive layout */
@media (max-width: 640.98px) {
    .top-row[b-5io4z2chv1], article[b-5io4z2chv1] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    main[b-5io4z2chv1] {
        padding: 0;
        margin: 0;
    }
    
    /* Mobile sidebar positioning - use dynamic viewport and safe areas */
    .app-sidebar[b-5io4z2chv1] {
        position: fixed;
        width: 100vw; /* Full width on mobile */
        /* Use dynamic viewport height and safe areas for mobile browser compatibility */
        height: calc(100vh - var(--header-height, 60px));
        height: calc(100dvh - var(--header-height, 60px)); /* Dynamic viewport height */
        height: calc(100vh - var(--header-height, 60px) - env(safe-area-inset-bottom));
        top: var(--header-height, 60px); /* Start below header */
        left: -100vw; /* Hidden by default */
        z-index: 10020; /* Higher than Files page content (max 10010) but below header */
        transform: translateX(0);
        transition: left 0.3s ease;
        /* Add padding bottom to ensure content doesn't get hidden behind mobile browser UI */
        padding-bottom: env(safe-area-inset-bottom, 20px);
        box-sizing: border-box;
    }
    
    /* Override desktop sidebar width on mobile */
    .sidebar[b-5io4z2chv1] {
        width: 100% !important; /* Full width on mobile, override desktop 250px */
        height: 100% !important; /* Full height of container */
        position: relative !important; /* Reset desktop sticky positioning */
        /* Ensure scrollable content accounts for mobile browser UI */
        padding-bottom: 20px; /* Additional padding for mobile browser toolbars */
        box-sizing: border-box;
    }
    
    /* Show sidebar when not collapsed (when toggle is activated) */
    .app-sidebar:not(.collapsed)[b-5io4z2chv1] {
        left: 0 !important;
    }
    
    /* Override collapsed state behavior on mobile */
    .app-sidebar.collapsed[b-5io4z2chv1] {
        left: -100vw !important; /* Hidden when collapsed */
    }
    
    /* Ensure page content is visible by default on mobile */
    .page[b-5io4z2chv1] {
        flex-direction: column;
    }
    
    /* Ensure header stays visible on mobile */
    .app-header[b-5io4z2chv1] {
        position: fixed !important;
        top: 0;
        top: env(safe-area-inset-top, 0); /* Account for notches and status bars */
        left: 0;
        right: 0;
        z-index: 10030 !important; /* Always above sidebar and Files page content */
    }
    
    /* Adjust main content to account for fixed header and mobile browser UI */
    .app-main[b-5io4z2chv1] {
        margin-top: var(--header-height, 60px);
        margin-top: calc(var(--header-height, 60px) + env(safe-area-inset-top, 0));
        /* Ensure content doesn't get cut off by mobile browser bottom toolbar */
        padding-bottom: env(safe-area-inset-bottom, 20px);
        box-sizing: border-box;
    }
    
    /* Mobile sidebar overlay */
    .sidebar-overlay[b-5io4z2chv1] {
        position: fixed;
        top: var(--header-height, 60px);
        top: calc(var(--header-height, 60px) + env(safe-area-inset-top, 0));
        left: 0;
        right: 0;
        bottom: 0;
        bottom: env(safe-area-inset-bottom, 0);
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10015; /* Below sidebar but above Files page content */
        cursor: pointer;
    }
}

/* Mobile-first: Hide desktop selectors on mobile, show mobile menu items */
.desktop-selectors[b-5io4z2chv1] {
    display: none;
}

.mobile-only[b-5io4z2chv1] {
    display: block;
}

/* Hide performance toggle on mobile */
@media (max-width: 640.98px) {
    .performance-toggle[b-5io4z2chv1] {
        display: none !important;
    }
}

/* Desktop: Show desktop selectors, hide mobile menu items */
@media (min-width: 641px) {
    .desktop-selectors[b-5io4z2chv1] {
        display: flex;
        gap: 0.5rem;
        align-items: center;
    }
    
    .mobile-only[b-5io4z2chv1] {
        display: none !important;
    }
}

/* Mobile dropdown styling */
.mobile-only .dropdown-header[b-5io4z2chv1] {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    padding: 0.5rem 1rem 0.25rem 1rem;
    margin-bottom: 0;
}

.mobile-only .dropdown-item.ms-3[b-5io4z2chv1] {
    padding-left: 2rem;
    font-size: 0.875rem;
}

/* Fix dropdown background overflow on mobile */
@media (max-width: 640.98px) {
    .user-menu[b-5io4z2chv1] {
        position: relative;
    }
    
    .user-menu .dropdown-menu[b-5io4z2chv1] {
        position: absolute;
        top: 100%;
        right: 0;
        left: auto;
        max-width: 90vw;
        min-width: 280px;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: 0.5rem;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
        background-color: var(--background-primary) !important;
        border: 1px solid var(--border-color);
        margin-top: 0.5rem;
        z-index: 1050;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* Ensure solid background for dark/light themes */
    [data-theme="dark"] .user-menu .dropdown-menu[b-5io4z2chv1] {
        background-color: #1a1a1a !important;
        border-color: #333;
    }
    
    [data-theme="light"] .user-menu .dropdown-menu[b-5io4z2chv1] {
        background-color: #ffffff !important;
        border-color: #e5e7eb;
    }
    
    [data-theme="auto"] .user-menu .dropdown-menu[b-5io4z2chv1] {
        background-color: var(--bs-body-bg, #ffffff) !important;
    }
    
    /* Auto theme should use data-theme resolved value, not media queries */
    [data-theme="dark"] .user-menu .dropdown-menu[b-5io4z2chv1] {
        background-color: #1a1a1a !important;
        border-color: #333;
    }
    
    .user-menu .dropdown-item[b-5io4z2chv1] {
        padding: 0.75rem 1rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-primary) !important;
        background-color: transparent !important;
        border: none;
        text-decoration: none;
    }
    
    .user-menu .dropdown-item:hover[b-5io4z2chv1],
    .user-menu .dropdown-item:focus[b-5io4z2chv1] {
        background-color: var(--background-secondary) !important;
        color: var(--text-primary) !important;
    }
    
    .user-menu .dropdown-item.active[b-5io4z2chv1] {
        background-color: var(--primary-color) !important;
        color: white !important;
    }
    
    .user-menu .dropdown-header[b-5io4z2chv1] {
        padding: 0.75rem 1rem 0.25rem 1rem;
        font-size: 0.875rem;
        font-weight: 600;
        color: var(--text-secondary) !important;
        background-color: transparent !important;
    }
    
    .user-menu .dropdown-divider[b-5io4z2chv1] {
        margin: 0.5rem 0;
        border-color: var(--border-color);
        opacity: 0.5;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
/* Sidebar navigation styles */
.sidebar-nav[b-uma4wenyqt] {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 0;
    overflow: hidden; /* Prevent the entire sidebar from scrolling */
}

/* Splitter Styles */
.nav-splitter[b-uma4wenyqt] {
    height: 8px;
    background: linear-gradient(180deg, 
        transparent 0%, 
        var(--border-color) 30%, 
        var(--border-color) 70%, 
        transparent 100%);
    cursor: row-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* Hide splitter when tree is collapsed */
.nav-splitter.hidden[b-uma4wenyqt] {
    display: none;
}

.nav-splitter:hover[b-uma4wenyqt] {
    background: linear-gradient(180deg, 
        transparent 0%, 
        var(--primary-color) 30%, 
        var(--primary-color) 70%, 
        transparent 100%);
}

.splitter-handle[b-uma4wenyqt] {
    width: 20px;
    height: 4px;
    background: var(--text-tertiary);
    border-radius: 2px;
    opacity: 0.6;
    transition: all 0.2s ease;
}

.nav-splitter:hover .splitter-handle[b-uma4wenyqt] {
    background: var(--primary-color);
    opacity: 1;
    width: 30px;
}

.nav-splitter:active .splitter-handle[b-uma4wenyqt] {
    background: var(--primary-color-light);
    width: 40px;
}

/* Tree section with dynamic height */
.nav-section.tree-section[b-uma4wenyqt] {
    flex-shrink: 0;
    /* Height will be set dynamically via inline style */
}

/* Navigation section styles */
.nav-section[b-uma4wenyqt] {
    margin: 0.5rem 0;
    padding: 0 0.5rem;
}

.nav-section-title[b-uma4wenyqt] {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 1rem 0 0.5rem 0;
    padding: 0 0.5rem;
    letter-spacing: 0.05em;
}

.navbar-brand[b-uma4wenyqt] {
    font-size: 1.1rem;
    color: var(--text-primary);
}

.oi[b-uma4wenyqt] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-uma4wenyqt] {
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

    .nav-item:first-of-type[b-uma4wenyqt] {
        padding-top: 0;
    }

    .nav-item:last-of-type[b-uma4wenyqt] {
        padding-bottom: 0;
    }

    .nav-item[b-uma4wenyqt]  a,
    .nav-item button[b-uma4wenyqt] {
        color: var(--text-secondary);
        border-radius: 0.375rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align: left;
        line-height: 1.1;
        text-decoration: none;
        transition: all 0.2s ease;
        padding: 0 0.75rem;
        gap: 0.75rem;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        border: none;
        background: none;
        font-family: inherit;
        font-size: inherit;
        cursor: pointer;
    }

.nav-item[b-uma4wenyqt]  a.active,
.nav-item button.active[b-uma4wenyqt] {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.nav-item[b-uma4wenyqt]  a:hover,
.nav-item button:hover[b-uma4wenyqt] {
    background-color: var(--bg-tertiary);
    color: var(--primary-color);
}

.nav-icon[b-uma4wenyqt] {
    width: 1rem;
    flex-shrink: 0;
}

.nav-text[b-uma4wenyqt] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Task counts in navigation */
.task-counts[b-uma4wenyqt] {
    display: flex;
    gap: 0.25rem;
    margin-left: auto;
    align-items: center;
    flex-shrink: 0;
}

/* Task counts in navigation - more specific selector to override global styles */
.sidebar-nav .task-count[b-uma4wenyqt] {
    background-color: rgba(0, 0, 0, 0.1);
    color: white !important; /* Ensure white color for visibility */
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.35rem;
    border-radius: 10px;
    min-width: 1.2rem;
    text-align: center;
    line-height: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.sidebar-nav .task-count.copy[b-uma4wenyqt] {
    background-color: #3b82f6;
}

.sidebar-nav .task-count.download[b-uma4wenyqt] {
    background-color: #10b981;
}

.sidebar-nav .task-count.upload[b-uma4wenyqt] {
    background-color: #f59e0b;
}

/* Hide task counts when count is 0 */
.sidebar-nav .task-count:has-text("0")[b-uma4wenyqt] {
    display: none;
}

/* Alternative approach for hiding zero counts */
.sidebar-nav .task-count[data-count="0"][b-uma4wenyqt] {
    display: none;
}

/* Update indicator */
.sidebar-nav .update-indicator[b-uma4wenyqt] {
    color: #10b981 !important; /* Green color for update ready */
    font-size: 0.8rem;
    margin-left: 0.5rem;
    animation: pulse-b-uma4wenyqt 2s infinite;
}

@keyframes pulse-b-uma4wenyqt {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .task-counts[b-uma4wenyqt] {
        gap: 0.15rem;
    }
    
    .sidebar-nav .task-count[b-uma4wenyqt] {
        font-size: 0.6rem;
        padding: 0.1rem 0.25rem;
        min-width: 1rem;
    }
}

/* Tree view section styles */
.nav-section.tree-section[b-uma4wenyqt] {
    margin: 0; /* Remove margin */
    padding: 0;
    background-color: var(--bg-primary);
    border: none; /* Remove border */
    border-radius: 0; /* Remove border radius */
    flex-shrink: 1; /* Allow shrinking */
    flex-grow: 0; /* Don't grow */
    min-height: 0; /* Allow it to shrink below its content */
    display: flex;
    flex-direction: column;
    /* Dynamic height control - allow large expansion but with fallback safety limit */
    max-height: calc(100vh - 150px); /* Fallback: never exceed viewport height minus 150px */
    transition: max-height 0.3s ease-in-out;
    overflow: hidden; /* Important for smooth animation and button visibility */
    position: relative; /* For sticky button positioning */
    /* Ensure minimum height to always show the header */
    min-height: 48px; /* Just the header height */
}

.nav-section.tree-section.collapsed[b-uma4wenyqt] {
    max-height: 48px; /* Just the header height */
    min-height: 48px; /* Ensure consistent height when collapsed */
    flex-shrink: 0;
    margin-bottom: 0; /* Remove bottom margin when collapsed to eliminate gap */
}

/* Full expansion state - override max-height */
.nav-section.tree-section.fully-expanded[b-uma4wenyqt] {
    max-height: calc(100vh - 100px); /* Allow more expansion but keep splitter visible */
    flex-grow: 1; /* Allow it to grow and take available space */
}

.tree-section-header[b-uma4wenyqt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s ease;
    flex-shrink: 0; /* Don't shrink header */
    border-radius: 0; /* Remove rounded corners */
    height: 20px; /* Fixed height for consistency */
    box-sizing: border-box; /* Include padding in height calculation */
}

.tree-section-header:hover[b-uma4wenyqt] {
    background: var(--bg-tertiary);
}

.tree-section-title[b-uma4wenyqt] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
}

.tree-section-title i[b-uma4wenyqt] {
    color: var(--primary-color);
}

.tree-header-actions[b-uma4wenyqt] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.tree-refresh-btn[b-uma4wenyqt] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.tree-refresh-btn:hover[b-uma4wenyqt] {
    background: var(--bg-primary);
    color: var(--primary-color);
}

.tree-toggle-btn[b-uma4wenyqt] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.8rem;
    padding: 4px;
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.tree-toggle-btn:hover[b-uma4wenyqt] {
    background: var(--bg-primary);
    color: var(--primary-color);
}

.tree-toggle-btn i[b-uma4wenyqt] {
    transition: transform 0.3s ease;
}

.tree-view-container[b-uma4wenyqt] {
    flex: 1;
    min-height: 0; /* Important: allows flex child to shrink */
    overflow: hidden; /* Let TreeView handle its own scrolling */
    transition: opacity 0.2s ease;
    /* Use full available height - no need to reserve space for expand button */
    height: 100%;
}

/* Hide tree view container when collapsed */
.tree-view-container.hidden[b-uma4wenyqt] {
    display: none;
}

/* Navigation sections layout */
.nav-section:not(.tree-section)[b-uma4wenyqt] {
    flex-shrink: 0; /* Navigation sections don't shrink */
    padding: 0 0.5rem;
    margin: 0.5rem 0;
}

/* Create a scrollable area for navigation items */
.nav-items-container[b-uma4wenyqt] {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 0.5rem 1rem 0.5rem; /* Add bottom padding */
    /* Calculate available height: total height minus tree section minus splitter (when visible) minus padding */
    /* --current-tree-height includes header (48px) and content height and splitter (8px when expanded) */
    /* Bottom padding: 1rem = 16px */
    /* Additional safety margin: 10px */
    /* Total offset: 16px + 10px = 26px */
    height: calc(100vh - var(--current-tree-height, 356px) - 26px);
    flex-shrink: 0; /* Don't shrink */
}

/* Remove padding/margin gaps when tree is collapsed */
.tree-section.collapsed + .nav-splitter.hidden + .nav-items-container[b-uma4wenyqt] {
    padding-top: 0;
    margin-top: 0;
}

.tree-section.collapsed + .nav-splitter.hidden + .nav-items-container .nav-section:first-child[b-uma4wenyqt] {
    margin-top: 0;
    padding-top: 0;
}

.sidebar-nav:has(.tree-section.collapsed) .nav-items-container[b-uma4wenyqt] {
    padding-top: 0;
}

/* Remove margin from first nav-section when tree is collapsed to eliminate gap */
.nav-section.tree-section.collapsed + .nav-items-container .nav-section:first-child[b-uma4wenyqt] {
    margin-top: 0;
}

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

    .collapse[b-uma4wenyqt] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }
    
    .nav-scrollable[b-uma4wenyqt] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
    
    /* Add CSS safety limits on desktop - allow dragging to bottom but keep accessible */
    .nav-section.tree-section[b-uma4wenyqt] {
        max-height: calc(100vh - 120px); /* Desktop: leave 120px for navigation items */
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    /* Adjust sidebar navigation height for mobile */
    .sidebar-nav[b-uma4wenyqt] {
        height: 100vh; /* Use full viewport height for proper mobile experience */
        max-height: 100vh; /* Prevent overflow */
        display: flex;
        flex-direction: column;
    }
    
    .nav-section.tree-section[b-uma4wenyqt] {
        /* Allow folder tree to use most of the sidebar space for better folder operations */
        max-height: 75vh; /* Increased to show fewer nav items */
        min-height: 44px; /* Just the header height */
        flex: 0 0 auto; /* Don't grow or shrink, use content size */
    }
    
    /* When expanded, allow more space to show only 2 nav items */
    .nav-section.tree-section.fully-expanded[b-uma4wenyqt] {
        max-height: 82vh; /* Increased to leave space for only ~2 navigation items */
        flex: 0 0 auto; /* Don't grow or shrink, use content size */
    }
    
    .nav-section.tree-section.collapsed[b-uma4wenyqt] {
        max-height: 44px; /* Header height on mobile */
        min-height: 44px;
        flex: 0 0 44px; /* Fixed height when collapsed */
    }
    
    /* Hide desktop splitter on mobile */
    .nav-splitter[b-uma4wenyqt] {
        display: none;
    }
    
    /* Ensure navigation sections fill remaining space on mobile */
    .nav-section:not(.tree-section)[b-uma4wenyqt] {
        flex-shrink: 0; /* Don't shrink */
        margin: 0.25rem 0; /* Reduce margin to save space */
        padding: 0 0.25rem; /* Reduce padding */
    }
    
    /* Show mobile tree controls */
    .mobile-tree-controls[b-uma4wenyqt] {
        display: flex;
        justify-content: center;
        padding: 2px 16px; /* Reduced padding from 4px to 2px for thinner controls area */
        background: transparent;
        border-top: 1px solid var(--border-color);
        flex: 0 0 auto; /* Fixed size, don't grow or shrink */
    }
    
    .mobile-expand-btn[b-uma4wenyqt] {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: 3px; /* Smaller border radius */
        padding: 2px 6px; /* Reduced padding for thinner button */
        color: var(--text-secondary);
        font-size: 0.7rem; /* Smaller font */
        cursor: pointer;
        transition: all 0.2s ease;
        min-height: 18px; /* Reduced from 24px to 18px */
        width: 28px; /* Reduced from 32px to 28px */
    }
    
    .mobile-expand-btn:hover[b-uma4wenyqt] {
        background: var(--bg-hover);
        color: var(--text-primary);
        border-color: var(--primary-color);
    }
    
    .mobile-expand-btn i[b-uma4wenyqt] {
        font-size: 0.65rem; /* Smaller icon for smaller button */
    }
    
    /* Hide text in mobile expand button */
    .mobile-expand-btn span[b-uma4wenyqt] {
        display: none;
    }
    
    .tree-section-header[b-uma4wenyqt] {
        padding: 10px 12px; /* Smaller padding on mobile */
        height: 20px; /* Fixed height for consistency */
        box-sizing: border-box; /* Include padding in height calculation */
    }
    
    .tree-section-title[b-uma4wenyqt] {
        font-size: 0.85rem; /* Slightly smaller title */
    }
    
    .tree-full-expand-btn[b-uma4wenyqt] {
        padding: 8px 12px; /* Slightly more padding for easier touch */
        font-size: 0.85rem;
    }
    
    .nav-items-container[b-uma4wenyqt] {
        padding: 0 0.25rem 1rem 0.25rem; /* Add some bottom padding */
        /* Fill all remaining space after tree section */
        flex: 1 1 auto; /* Grow to fill remaining space, but allow shrinking */
        min-height: 0; /* Allow shrinking to minimal size */
        overflow-y: auto; /* Enable vertical scrolling */
        overflow-x: hidden; /* Hide horizontal overflow */
        -webkit-overflow-scrolling: touch; /* Enable smooth scrolling on iOS */
        display: block; /* Use block layout instead of flex for better mobile scrolling */
    }
    
    /* Ensure the nav items container has proper touch scrolling behavior */
    .nav-items-container[b-uma4wenyqt] {
        /* Add momentum scrolling for iOS */
        -webkit-overflow-scrolling: touch;
        /* Ensure scroll behavior is smooth */
        scroll-behavior: smooth;
        /* Force hardware acceleration for better performance */
        transform: translateZ(0);
        will-change: scroll-position;
    }
}

/* Hide mobile controls on desktop */
@media (min-width: 769px) {
    .mobile-tree-controls[b-uma4wenyqt] {
        display: none;
    }
}

/* iPhone specific fixes for scrolling */
@media (max-width: 480px) {
    .sidebar-nav[b-uma4wenyqt] {
        /* Ensure proper height on iPhone */
        height: 100vh;
        height: -webkit-fill-available; /* Better support for Safari on iOS */
        display: flex;
        flex-direction: column;
    }
    
    .nav-items-container[b-uma4wenyqt] {
        /* Ensure scrolling works on iPhone Safari */
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        /* Fix for Safari bounce effect */
        overscroll-behavior-y: contain;
        /* Ensure proper sizing on iPhone */
        flex: 1 1 0;
        min-height: 0;
        /* Force proper scrolling behavior */
        transform: translateZ(0);
        will-change: scroll-position;
        /* Ensure the container can be scrolled */
        height: 1px; /* Trick to force flex item to use available space */
    }
    
    /* Specific fix for nav sections within the scrollable container */
    .nav-items-container .nav-section[b-uma4wenyqt] {
        flex-shrink: 0; /* Prevent sections from shrinking */
    }
}

/* Additional mobile debugging - can be enabled for troubleshooting */
/*
@media (max-width: 768px) {
    .nav-items-container {
        border: 2px solid red;
        background-color: rgba(255, 0, 0, 0.1);
    }
}
*/

/* Ensure proper scrollbar styling for the navigation items container */
.nav-items-container[b-uma4wenyqt]::-webkit-scrollbar {
    width: 6px;
}

.nav-items-container[b-uma4wenyqt]::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

.nav-items-container[b-uma4wenyqt]::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

.nav-items-container[b-uma4wenyqt]::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Apply the same scrollbar styling to the tree view container */
.tree-view-container[b-uma4wenyqt]::-webkit-scrollbar,
.tree-view-container .tree-content[b-uma4wenyqt]::-webkit-scrollbar {
    width: 6px;
}

.tree-view-container[b-uma4wenyqt]::-webkit-scrollbar-track,
.tree-view-container .tree-content[b-uma4wenyqt]::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

.tree-view-container[b-uma4wenyqt]::-webkit-scrollbar-thumb,
.tree-view-container .tree-content[b-uma4wenyqt]::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

.tree-view-container[b-uma4wenyqt]::-webkit-scrollbar-thumb:hover,
.tree-view-container .tree-content[b-uma4wenyqt]::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}
/* /Shared/OAuthLogin.razor.rz.scp.css */
/* OAuth Login Component Styles */
.oauth-login-container[b-lobe4ig8pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.oauth-ready[b-lobe4ig8pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}

.oauth-button[b-lobe4ig8pu] {
    min-width: 200px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.oauth-button:hover[b-lobe4ig8pu] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}

.oauth-button:disabled[b-lobe4ig8pu] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.oauth-button i[b-lobe4ig8pu] {
    font-size: 1rem;
}

.oauth-help[b-lobe4ig8pu] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    text-align: center;
    max-width: 300px;
    line-height: 1.4;
}

.oauth-processing[b-lobe4ig8pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
}

.oauth-processing .loading-spinner[b-lobe4ig8pu] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--border-color);
    border-top: 4px solid var(--primary-color);
    border-radius: 50%;
    animation: spin-b-lobe4ig8pu 1s linear infinite;
}

.oauth-processing p[b-lobe4ig8pu] {
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.875rem;
}

.oauth-error[b-lobe4ig8pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 8px;
    border-left: 4px solid #ef4444;
}

.oauth-error i[b-lobe4ig8pu] {
    color: #ef4444;
    font-size: 1.5rem;
}

.oauth-error p[b-lobe4ig8pu] {
    color: var(--text-primary);
    margin: 0;
    font-size: 0.875rem;
    max-width: 300px;
    line-height: 1.4;
}

.oauth-error .btn[b-lobe4ig8pu] {
    margin-top: 0.5rem;
}

/* Responsive design */
@media (max-width: 600px) {
    .oauth-login-container[b-lobe4ig8pu] {
        padding: 0.75rem;
    }
    
    .oauth-button[b-lobe4ig8pu] {
        min-width: 100%;
        padding: 1rem 1.5rem;
    }
    
    .oauth-help[b-lobe4ig8pu] {
        font-size: 0.8rem;
    }
    
    .oauth-processing[b-lobe4ig8pu] {
        padding: 1.5rem;
    }
    
    .oauth-error[b-lobe4ig8pu] {
        padding: 1rem;
    }
}

/* Loading animation */
@keyframes spin-b-lobe4ig8pu {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* /Shared/OfflineDownloadModal.razor.rz.scp.css */
/* Modal overlay and container styles */
.modal-overlay[b-fh893fzr5z] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    animation: fadeIn-b-fh893fzr5z 0.2s ease-out;
}

.offline-download-modal[b-fh893fzr5z] {
    background: var(--bs-body-bg, white);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp-b-fh893fzr5z 0.3s ease-out;
    color: var(--bs-body-color, #212529);
}

/* Modal header styles */
.modal-header[b-fh893fzr5z] {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bs-light, #f8f9fa);
}

.modal-header h3[b-fh893fzr5z] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--bs-primary, #0d6efd);
}

.modal-close-btn[b-fh893fzr5z] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--bs-secondary, #6c757d);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
    transition: color 0.2s ease;
}

.modal-close-btn:hover[b-fh893fzr5z] {
    color: var(--bs-danger, #dc3545);
}

/* Modal content styles */
.modal-content[b-fh893fzr5z] {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
    /* Remove bottom shadow to match Search modal */
    box-shadow: none !important;
    -webkit-overflow-scrolling: touch;
}

.form-group[b-fh893fzr5z] {
    margin-bottom: 1.5rem;
}

.form-group label[b-fh893fzr5z] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--bs-body-color, #212529);
}

/* URL input container with drag and drop */
.url-input-container[b-fh893fzr5z] {
    position: relative;
    border: 2px dashed var(--bs-border-color, #dee2e6);
    border-radius: 0.375rem;
    transition: border-color 0.2s ease, background-color 0.2s ease;
    background: var(--bs-body-bg, white);
}

.url-input-container:hover[b-fh893fzr5z] {
    border-color: var(--bs-primary, #0d6efd);
}

.url-input-container.drag-over[b-fh893fzr5z] {
    border-color: var(--bs-success, #198754);
    background-color: var(--bs-success-bg-subtle, rgba(25, 135, 84, 0.1));
}

.url-textarea[b-fh893fzr5z] {
    width: 100%;
    border: none;
    background: transparent;
    resize: vertical;
    min-height: 120px;
    padding: 0.75rem;
    font-family: var(--bs-font-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--bs-body-color, #212529);
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: auto;
}

/* Allow placeholder text to wrap while keeping input text unwrapped */
.url-textarea[b-fh893fzr5z]::placeholder {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.4;
}

.url-textarea:focus[b-fh893fzr5z] {
    outline: none;
    box-shadow: none;
}

/* File upload overlay styles - similar to Files.razor */
.file-upload-overlay[b-fh893fzr5z] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    cursor: pointer;
}

.file-upload-overlay.drag-active[b-fh893fzr5z] {
    opacity: 0;
}

/* Drag-and-drop visual feedback overlay */
.drag-drop-overlay[b-fh893fzr5z] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    pointer-events: none;
    border-radius: 0.375rem;
}

.drag-drop-message[b-fh893fzr5z] {
    text-align: center;
    color: var(--bs-primary, #0d6efd);
}

.drag-drop-message i[b-fh893fzr5z] {
    color: var(--bs-success, #198754);
}

.drag-drop-message h5[b-fh893fzr5z] {
    margin: 0.5rem 0;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}

.drag-drop-message p[b-fh893fzr5z] {
    margin: 0;
    font-size: 0.875rem;
}

/* Drag overlay */
.drag-overlay[b-fh893fzr5z] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bs-success-bg-subtle, rgba(25, 135, 84, 0.1));
    color: var(--bs-success, #198754);
    font-weight: 500;
    border-radius: 0.375rem;
    pointer-events: none;
}

.drag-overlay i[b-fh893fzr5z] {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* File upload section */
.file-upload-section[b-fh893fzr5z] {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.file-upload-section small[b-fh893fzr5z] {
    flex: 1;
    min-width: 200px;
}

/* Options section */
.options-section[b-fh893fzr5z] {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--bs-light, #f8f9fa);
    border-radius: 0.375rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
}

/* Explicit light theme support */
[data-bs-theme="light"] .offline-download-modal[b-fh893fzr5z] {
    background: white;
    color: #212529;
}

[data-bs-theme="light"] .modal-header[b-fh893fzr5z],
[data-bs-theme="light"] .modal-footer[b-fh893fzr5z] {
    background: #f8f9fa;
    border-color: #dee2e6;
}

[data-bs-theme="light"] .options-section[b-fh893fzr5z] {
    background: #f8f9fa;
    border-color: #dee2e6;
}

[data-bs-theme="light"] .url-input-container[b-fh893fzr5z] {
    border-color: #dee2e6;
    background: white;
}

.form-check[b-fh893fzr5z] {
    margin-bottom: 1rem;
}

.form-check:last-child[b-fh893fzr5z] {
    margin-bottom: 0;
}

.form-check-label[b-fh893fzr5z] {
    font-weight: 500;
    margin-left: 0.25rem;
}

.form-check small[b-fh893fzr5z] {
    margin-left: 1.5rem;
    margin-top: 0.25rem;
}

/* Message styles */
.error-message[b-fh893fzr5z], .success-message[b-fh893fzr5z] {
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    margin-top: 1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.error-message[b-fh893fzr5z] {
    background: var(--bs-danger-bg-subtle, rgba(220, 53, 69, 0.1));
    border: 1px solid var(--bs-danger-border-subtle, rgba(220, 53, 69, 0.2));
    color: var(--bs-danger-text-emphasis, #842029);
}

.success-message[b-fh893fzr5z] {
    background: var(--bs-success-bg-subtle, rgba(25, 135, 84, 0.1));
    border: 1px solid var(--bs-success-border-subtle, rgba(25, 135, 84, 0.2));
    color: var(--bs-success-text-emphasis, #0f5132);
}

.error-message p[b-fh893fzr5z], .success-message p[b-fh893fzr5z] {
    margin: 0;
    flex: 1;
}

.error-message i[b-fh893fzr5z] {
    color: var(--bs-danger, #dc3545);
    margin-top: 0.125rem;
}

.success-message i[b-fh893fzr5z] {
    color: var(--bs-success, #198754);
    margin-top: 0.125rem;
}

/* Modal footer styles */
.modal-footer[b-fh893fzr5z] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color, #dee2e6);
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    background: var(--bs-light, #f8f9fa);
}

.modal-footer .btn[b-fh893fzr5z] {
    min-width: 100px;
}

/* Animations */
@keyframes fadeIn-b-fh893fzr5z {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp-b-fh893fzr5z {
    from {
        opacity: 0;
        transform: translateY(2rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design */
@media (max-width: 576px) {
    /* Ensure modal appears below the app's top nav on iPhone and small screens */
    .modal-overlay[b-fh893fzr5z] {
        align-items: flex-start;
        height: 100dvh;
    /* Let the modal itself own the spacing below the header to avoid double-counting */
    padding-top: env(safe-area-inset-top);
    padding-bottom: 0;
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        box-sizing: border-box;
    }

    .offline-download-modal[b-fh893fzr5z] {
        width: 95%;
    margin: 0;
    /* Place modal below header with a small gap; respect safe areas */
    margin-top: calc(var(--header-height, 60px) + 0.5rem);
    margin-bottom: max(0.5rem, env(safe-area-inset-bottom));
    /* Constrain height to visible viewport minus header and margins */
    max-height: calc(100dvh - (var(--header-height, 60px) + env(safe-area-inset-top) + max(0.5rem, env(safe-area-inset-bottom)) + 0.5rem));
    }

    .modal-header[b-fh893fzr5z], .modal-content[b-fh893fzr5z], .modal-footer[b-fh893fzr5z] {
        padding: 1rem;
    }

    /* Keep footer buttons on one line on mobile */
    .modal-footer[b-fh893fzr5z] {
        flex-direction: row;
        justify-content: space-between;
        gap: 0.5rem;
        flex-wrap: nowrap;
    }

    .modal-footer .btn[b-fh893fzr5z] {
        min-width: 0;
        flex: 1 1 0;
    }

    .file-upload-section[b-fh893fzr5z] {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Dark theme support - use data-theme attribute only */
:root[data-theme="dark"] .modal-overlay[b-fh893fzr5z] {
    background: rgba(0, 0, 0, 0.5);
}

:root[data-theme="dark"] .offline-download-modal[b-fh893fzr5z] {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.15));
    color: var(--bs-light, #f8f9fa);
}

:root[data-theme="dark"] .modal-header[b-fh893fzr5z], 
:root[data-theme="dark"] .modal-footer[b-fh893fzr5z] {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.15));
}

:root[data-theme="dark"] .options-section[b-fh893fzr5z] {
    background: var(--bs-dark, #212529);
    border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.15));
}

:root[data-theme="dark"] .url-input-container[b-fh893fzr5z] {
    border-color: var(--bs-border-color-translucent, rgba(255, 255, 255, 0.15));
    background: var(--bs-dark, #212529);
}

/* Explicit dark theme support */
[data-bs-theme="dark"] .offline-download-modal[b-fh893fzr5z] {
    background: #212529;
    color: #f8f9fa;
}

[data-bs-theme="dark"] .modal-header[b-fh893fzr5z],
[data-bs-theme="dark"] .modal-footer[b-fh893fzr5z] {
    background: #212529;
    border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .options-section[b-fh893fzr5z] {
    background: #212529;
    border-color: rgba(255, 255, 255, 0.15);
}

[data-bs-theme="dark"] .url-input-container[b-fh893fzr5z] {
    border-color: rgba(255, 255, 255, 0.15);
    background: #212529;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .offline-download-modal[b-fh893fzr5z] {
        border-width: 2px;
    }
    
    .url-input-container[b-fh893fzr5z] {
        border-width: 2px;
    }
    
    .error-message[b-fh893fzr5z], .success-message[b-fh893fzr5z] {
        border-width: 2px;
    }
}

/* Focus styles for accessibility */
.url-textarea:focus[b-fh893fzr5z] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}

.form-check-input:focus[b-fh893fzr5z] {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.modal-close-btn:focus[b-fh893fzr5z] {
    outline: 2px solid var(--bs-primary, #0d6efd);
    outline-offset: 2px;
}
/* /Shared/QRCodeLogin.razor.rz.scp.css */
/* QRCode Login Modal Styles */
.qrcode-login-overlay[b-tux9e69tb5] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    padding: 1rem;
}

.qrcode-login-container[b-tux9e69tb5] {
    background: var(--bs-body-bg);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 450px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn-b-tux9e69tb5 0.3s ease-out;
}

.qrcode-header[b-tux9e69tb5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.qrcode-header h4[b-tux9e69tb5] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--bs-heading-color);
}

.qrcode-close-btn[b-tux9e69tb5] {
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--bs-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.qrcode-close-btn:hover[b-tux9e69tb5] {
    color: var(--bs-danger);
    background-color: var(--bs-danger-bg-subtle);
}

.qrcode-content[b-tux9e69tb5] {
    padding: 1.5rem;
    text-align: center;
}

.qrcode-loading[b-tux9e69tb5] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
}

.qrcode-image-container[b-tux9e69tb5] {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--bs-light);
    border-radius: 8px;
    border: 2px dashed var(--bs-border-color);
}

.qrcode-image[b-tux9e69tb5] {
    max-width: 250px;
    max-height: 250px;
    width: auto;
    height: auto;
    border-radius: 4px;
}

/* Styling for local QR code generator canvas */
.qrcode-canvas[b-tux9e69tb5] {
    max-width: 250px;
    max-height: 250px;
    width: auto;
    height: auto;
    border-radius: 4px;
    border: 1px solid var(--bs-border-color);
    background: white;
}

.qrcode-generated[b-tux9e69tb5] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.qrcode-status[b-tux9e69tb5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 6px;
    background-color: var(--bs-info-bg-subtle);
    color: var(--bs-info-text-emphasis);
    border: 1px solid var(--bs-info-border-subtle);
    margin-bottom: 1rem;
    font-weight: 500;
}

.qrcode-status.error[b-tux9e69tb5] {
    background-color: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
    border-color: var(--bs-danger-border-subtle);
}

.qrcode-status i[b-tux9e69tb5] {
    font-size: 1.1rem;
}

.qrcode-instructions[b-tux9e69tb5] {
    background-color: var(--bs-secondary-bg);
    padding: 1rem;
    border-radius: 6px;
    border-left: 4px solid var(--bs-primary);
    margin-bottom: 1rem;
    text-align: left;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    line-height: 1.5;
}

.qrcode-footer[b-tux9e69tb5] {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--bs-border-color);
    display: flex;
    justify-content: center;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .qrcode-login-overlay[b-tux9e69tb5] {
        padding: 0.5rem;
    }
    
    .qrcode-login-container[b-tux9e69tb5] {
        max-width: 100%;
        margin: 0;
    }
    
    .qrcode-header[b-tux9e69tb5] {
        padding: 1rem;
    }
    
    .qrcode-content[b-tux9e69tb5] {
        padding: 1rem;
    }
    
    .qrcode-image[b-tux9e69tb5] {
        max-width: 200px;
        max-height: 200px;
    }
    
    .qrcode-footer[b-tux9e69tb5] {
        padding: 1rem;
    }
}

/* Animation */
@keyframes modalSlideIn-b-tux9e69tb5 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Loading spinner override for QR code modal */
.qrcode-loading .loading-spinner[b-tux9e69tb5] {
    width: 40px;
    height: 40px;
    border-width: 3px;
}

/* Embedded QRCode Login Styles */
.qrcode-embedded-container[b-tux9e69tb5] {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.qrcode-embedded-header[b-tux9e69tb5] {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border-color);
}

.qrcode-embedded-header h4[b-tux9e69tb5] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* Override content styles for embedded mode */
.qrcode-embedded-container .qrcode-content[b-tux9e69tb5] {
    padding: 0;
}

.qrcode-embedded-container .qrcode-image-container[b-tux9e69tb5] {
    margin: 1.5rem 0;
}

.qrcode-embedded-container .qrcode-status[b-tux9e69tb5] {
    margin: 1rem 0;
}

.qrcode-embedded-container .qrcode-instructions[b-tux9e69tb5] {
    margin: 1rem 0 0;
}
/* /Shared/RenameModal.razor.rz.scp.css */
/* RenameModal.razor.css */

.modal-backdrop[b-4j20wjbcgl] {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1050;
}

.modal[b-4j20wjbcgl] {
    z-index: 1060;
}

.modal-content[b-4j20wjbcgl] {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.modal-header[b-4j20wjbcgl] {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
}

.modal-title[b-4j20wjbcgl] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--bs-body-color);
}

.modal-title i[b-4j20wjbcgl] {
    color: var(--bs-warning);
}

.modal-body[b-4j20wjbcgl] {
    padding: 1.5rem;
}

.form-label[b-4j20wjbcgl] {
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color);
}

.form-control[b-4j20wjbcgl] {
    border-radius: 6px;
    border: 1px solid var(--bs-border-color);
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Force light theme by default and for explicit light theme */
:root:not([data-theme]) .form-control[b-4j20wjbcgl],
:root[data-theme="light"] .form-control[b-4j20wjbcgl] {
    background-color: #ffffff !important;
    color: #212529 !important;
    border-color: #ced4da;
}

.form-control:focus[b-4j20wjbcgl] {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}

/* Light theme focus state */
:root:not([data-theme]) .form-control:focus[b-4j20wjbcgl],
:root[data-theme="light"] .form-control:focus[b-4j20wjbcgl] {
    background-color: #ffffff !important;
    color: #212529 !important;
}

.form-control.is-invalid[b-4j20wjbcgl] {
    border-color: var(--bs-danger);
}

.form-control.is-invalid:focus[b-4j20wjbcgl] {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.2rem rgba(var(--bs-danger-rgb), 0.25);
}

.invalid-feedback[b-4j20wjbcgl] {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--bs-danger);
}

.modal-footer[b-4j20wjbcgl] {
    border-top: 1px solid var(--bs-border-color);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.btn[b-4j20wjbcgl] {
    border-radius: 6px;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.15s ease-in-out;
}

.btn-secondary[b-4j20wjbcgl] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    color: var(--bs-light);
}

.btn-secondary:hover[b-4j20wjbcgl] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    opacity: 1;
    filter: brightness(1.1);
    color: var(--bs-light) !important;
}

.btn-primary[b-4j20wjbcgl] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-light);
}

.btn-primary:hover:not(:disabled)[b-4j20wjbcgl] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 1;
    filter: brightness(1.1);
    color: var(--bs-light) !important;
}

.btn-primary:disabled[b-4j20wjbcgl] {
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
    opacity: 0.6;
    cursor: not-allowed;
}

.spinner-border-sm[b-4j20wjbcgl] {
    width: 1rem;
    height: 1rem;
}

/* Light theme support (default) */
.light-theme .modal-content[b-4j20wjbcgl],
.modal-content[b-4j20wjbcgl] {
    background-color: var(--bs-light, #ffffff);
    color: var(--bs-dark, #212529);
}

.light-theme .modal-header[b-4j20wjbcgl],
.modal-header[b-4j20wjbcgl] {
    border-bottom-color: var(--bs-border-color, #dee2e6);
}

.light-theme .modal-footer[b-4j20wjbcgl],
.modal-footer[b-4j20wjbcgl] {
    border-top-color: var(--bs-border-color, #dee2e6);
}

.light-theme .form-control[b-4j20wjbcgl],
.form-control[b-4j20wjbcgl] {
    background-color: var(--bs-light, #ffffff);
    border-color: var(--bs-border-color, #ced4da);
    color: var(--bs-dark, #212529);
}

.light-theme .form-control:focus[b-4j20wjbcgl],
.form-control:focus[b-4j20wjbcgl] {
    background-color: var(--bs-light, #ffffff);
    color: var(--bs-dark, #212529);
}

/* Dark theme support */
:root[data-theme="dark"] .modal-content[b-4j20wjbcgl] {
    background-color: var(--bs-dark);
    color: var(--bs-light);
}

:root[data-theme="dark"] .modal-header[b-4j20wjbcgl] {
    border-bottom-color: var(--bs-secondary);
}

:root[data-theme="dark"] .modal-footer[b-4j20wjbcgl] {
    border-top-color: var(--bs-secondary);
}

:root[data-theme="dark"] .form-control[b-4j20wjbcgl] {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-secondary);
    color: var(--bs-light) !important;
}

:root[data-theme="dark"] .form-control:focus[b-4j20wjbcgl] {
    background-color: var(--bs-dark) !important;
    border-color: var(--bs-primary);
    color: var(--bs-light) !important;
}

/* Media query dark theme support */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .modal-content[b-4j20wjbcgl] {
        background-color: var(--bs-dark);
        color: var(--bs-light);
    }
    
    :root:not([data-theme]) .modal-header[b-4j20wjbcgl] {
        border-bottom-color: var(--bs-secondary);
    }
    
    :root:not([data-theme]) .modal-footer[b-4j20wjbcgl] {
        border-top-color: var(--bs-secondary);
    }
    
    :root:not([data-theme]) .form-control[b-4j20wjbcgl] {
        background-color: var(--bs-dark) !important;
        border-color: var(--bs-secondary);
        color: var(--bs-light) !important;
    }
    
    :root:not([data-theme]) .form-control:focus[b-4j20wjbcgl] {
        background-color: var(--bs-dark) !important;
        border-color: var(--bs-primary);
        color: var(--bs-light) !important;
    }
}

/* Ensure button text is always visible on hover */
.btn:hover[b-4j20wjbcgl] {
    color: inherit !important;
}

.btn-primary[b-4j20wjbcgl], .btn-primary:hover[b-4j20wjbcgl], .btn-primary:focus[b-4j20wjbcgl], .btn-primary:active[b-4j20wjbcgl] {
    color: white !important;
}

.btn-secondary[b-4j20wjbcgl], .btn-secondary:hover[b-4j20wjbcgl], .btn-secondary:focus[b-4j20wjbcgl], .btn-secondary:active[b-4j20wjbcgl] {
    color: white !important;
}
/* /Shared/ServerHealthIndicator.razor.rz.scp.css */
.server-health-indicator[b-4f7dx9igb5] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: default;
    max-width: 200px;
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.server-health-indicator i[b-4f7dx9igb5] {
    color: #dc2626;
    animation: pulse-red-b-4f7dx9igb5 1s infinite;
}

.server-health-indicator .status-text[b-4f7dx9igb5] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pulse animation for warnings */
@keyframes pulse-red-b-4f7dx9igb5 {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* Dark theme support */
html[data-theme="dark"] .server-health-indicator[b-4f7dx9igb5] {
    background-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Responsive design */
@media (max-width: 768px) {
    .server-health-indicator[b-4f7dx9igb5] {
        max-width: 150px;
        padding: 0.25rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .server-health-indicator .status-text[b-4f7dx9igb5] {
        display: none;
    }
}

@media (max-width: 480px) {
    .server-health-indicator[b-4f7dx9igb5] {
        max-width: 40px;
        padding: 0.25rem;
    }
    
    .server-health-indicator .status-text[b-4f7dx9igb5] {
        display: none;
    }
}
/* /Shared/StringListEditor.razor.rz.scp.css */
/* String List Editor Component Styles */
.string-list-editor[b-ovegnp729e] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
}

/* Mini view variant */
.string-list-editor.mini-view[b-ovegnp729e] {
    gap: 0.25rem;
    font-size: 0.875rem;
}

.integrated-input-container[b-ovegnp729e] {
    position: relative;
    min-height: 2.5rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-primary);
    cursor: text;
    transition: all 0.2s ease;
    padding: 0.5rem;
}

.mini-view .integrated-input-container[b-ovegnp729e] {
    min-height: 2rem;
    border-radius: 6px;
    padding: 0.375rem;
}

.integrated-input-container:hover[b-ovegnp729e] {
    border-color: var(--border-hover);
}

.integrated-input-container:focus-within[b-ovegnp729e] {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(var(--primary-rgb), 0.25);
}

.badges-and-input[b-ovegnp729e] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.375rem;
    min-height: 1.5rem;
}

.mini-view .badges-and-input[b-ovegnp729e] {
    gap: 0.25rem;
    min-height: 1.25rem;
}

.string-item-badge[b-ovegnp729e] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--primary-color);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    max-width: 180px;
    flex-shrink: 0;
}

.mini-view .string-item-badge[b-ovegnp729e] {
    padding: 0.15rem 0.375rem;
    gap: 0.25rem;
    border-radius: 12px;
    font-size: 0.7rem;
    max-width: 140px;
}

.string-item-badge:hover[b-ovegnp729e] {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.mini-view .string-item-badge:hover[b-ovegnp729e] {
    transform: translateY(-0.5px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.item-text[b-ovegnp729e] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.item-remove[b-ovegnp729e] {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mini-view .item-remove[b-ovegnp729e] {
    width: 14px;
    height: 14px;
    font-size: 0.6rem;
}

.item-remove:hover[b-ovegnp729e] {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

.mini-view .item-remove:hover[b-ovegnp729e] {
    transform: scale(1.05);
}

.inline-input[b-ovegnp729e] {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    flex: 1;
    min-width: 100px;
    padding: 0.125rem 0;
    font-family: inherit;
}

.mini-view .inline-input[b-ovegnp729e] {
    font-size: 0.8rem;
    min-width: 80px;
}

.inline-input[b-ovegnp729e]::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

.placeholder-overlay[b-ovegnp729e] {
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    opacity: 0.7;
    pointer-events: none;
    font-size: 0.9rem;
}

.mini-view .placeholder-overlay[b-ovegnp729e] {
    left: 0.375rem;
    font-size: 0.8rem;
}

.form-text[b-ovegnp729e] {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.mini-view .form-text[b-ovegnp729e] {
    font-size: 0.75rem;
    margin-top: 0.125rem;
}

/* Light theme styling */
:root[data-theme="light"] .string-item-badge[b-ovegnp729e] {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

:root[data-theme="light"] .string-item-badge:hover[b-ovegnp729e] {
    background: var(--primary-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

:root[data-theme="light"] .item-remove[b-ovegnp729e] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

:root[data-theme="light"] .item-remove:hover[b-ovegnp729e] {
    background: rgba(255, 255, 255, 0.4);
}

/* Dark theme styling */
:root[data-theme="dark"] .string-item-badge[b-ovegnp729e] {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:root[data-theme="dark"] .string-item-badge:hover[b-ovegnp729e] {
    background: var(--primary-hover);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .item-remove[b-ovegnp729e] {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

:root[data-theme="dark"] .item-remove:hover[b-ovegnp729e] {
    background: rgba(255, 255, 255, 0.4);
}

:root[data-theme="dark"] .integrated-input-container[b-ovegnp729e] {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}

/* Responsive design */
@media (max-width: 768px) {
    .string-item-badge[b-ovegnp729e] {
        max-width: 140px;
        font-size: 0.75rem;
        padding: 0.2rem 0.4rem;
    }
    
    .mini-view .string-item-badge[b-ovegnp729e] {
        max-width: 110px;
        font-size: 0.65rem;
        padding: 0.125rem 0.3rem;
    }
    
    .item-remove[b-ovegnp729e] {
        width: 14px;
        height: 14px;
        font-size: 0.6rem;
    }
    
    .mini-view .item-remove[b-ovegnp729e] {
        width: 12px;
        height: 12px;
        font-size: 0.55rem;
    }
    
    .inline-input[b-ovegnp729e] {
        font-size: 0.85rem;
        min-width: 80px;
    }
    
    .mini-view .inline-input[b-ovegnp729e] {
        font-size: 0.75rem;
        min-width: 60px;
    }
    
    .integrated-input-container[b-ovegnp729e] {
        min-height: 2.25rem;
        padding: 0.375rem;
    }
    
    .mini-view .integrated-input-container[b-ovegnp729e] {
        min-height: 1.75rem;
        padding: 0.25rem;
    }
    .add-item-container .form-control[b-ovegnp729e],
    .add-item-container .btn[b-ovegnp729e] {
        border-radius: 8px;
        border: 1px solid var(--border-color);
    }
    
    .mini-view .add-item-container .form-control[b-ovegnp729e],
    .mini-view .add-item-container .btn[b-ovegnp729e] {
        border-radius: 6px;
    }
}
/* /Shared/ThemeSelector.razor.rz.scp.css */
.theme-selector[b-iwg2em90e4] {
    display: inline-block;
}

.theme-btn[b-iwg2em90e4] {
    color: var(--text-secondary) !important;
    padding: 0.5rem;
    border: none;
    background: none;
    transition: all 0.2s ease;
    border-radius: 6px;
}

.theme-btn:hover[b-iwg2em90e4] {
    background: var(--light-color) !important;
    color: var(--primary-color) !important;
}

.theme-btn:focus[b-iwg2em90e4] {
    box-shadow: 0 0 0 2px var(--primary-color) !important;
}

.theme-icon[b-iwg2em90e4] {
    font-size: 1.1rem;
}

.theme-selector .dropdown-menu[b-iwg2em90e4] {
    min-width: 140px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 0.5rem 0;
}

.theme-selector .dropdown-item[b-iwg2em90e4] {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 0;
    transition: all 0.2s ease;
}

.theme-selector .dropdown-item:hover[b-iwg2em90e4] {
    background: var(--light-color);
    color: var(--primary-color);
}

.theme-selector .dropdown-item.active[b-iwg2em90e4] {
    background: var(--primary-color);
    color: white;
}

.theme-selector .dropdown-item i[b-iwg2em90e4] {
    width: 16px;
    text-align: center;
}
/* /Shared/TreeNode.razor.rz.scp.css */
/* Tree Node Styles */
.tree-node[b-cdm94l7ccn] {
    user-select: none;
}

.tree-node-content[b-cdm94l7ccn] {
    display: flex;
    align-items: center;
    padding: 4px 8px;
    margin: 1px 0;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
    min-height: 28px;
    gap: 6px;
    outline: none; /* Remove default outline */
    border: 1px solid transparent; /* Add transparent border for consistent sizing */
    position: relative;
}

/* Create an invisible overlay for better drag detection */
.tree-node-content[b-cdm94l7ccn]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none; /* Let events pass through to the actual content */
}

/* Ensure all child elements participate in drag events */
.tree-node-content > *[b-cdm94l7ccn] {
    pointer-events: auto;
    position: relative;
    z-index: 2;
}

/* Simplified highlighting - single background approach */
.tree-node-content:hover[b-cdm94l7ccn] {
    background: var(--bg-secondary);
}

.tree-node-content.current-path[b-cdm94l7ccn],
.tree-node-content.focused[b-cdm94l7ccn] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.1);
    font-weight: 500;
}

.tree-node-content.current-path:hover[b-cdm94l7ccn],
.tree-node-content.focused:hover[b-cdm94l7ccn] {
    background: rgba(var(--primary-color-rgb, 13, 110, 253), 0.15);
}

/* Ensure focused nodes are not cut off */
.tree-node-content[b-cdm94l7ccn] {
    min-width: max-content;
    white-space: nowrap;
}

.tree-node-toggle[b-cdm94l7ccn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.15s ease;
}

.tree-node-toggle:hover[b-cdm94l7ccn] {
    background: rgba(var(--text-secondary-rgb, 108, 117, 125), 0.1);
}

.toggle-icon[b-cdm94l7ccn] {
    font-size: 10px;
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}

.toggle-icon.loading-icon[b-cdm94l7ccn] {
    color: var(--primary-color);
    animation: spin-b-cdm94l7ccn 1s linear infinite;
}

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

.toggle-spacer[b-cdm94l7ccn] {
    width: 10px;
    display: inline-block;
}

.tree-node-icon[b-cdm94l7ccn] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    /* Remove line-height and vertical-align for better flex centering */
}

.folder-icon[b-cdm94l7ccn] {
    font-size: 17px;
    color: var(--folder-color, #ffc107);
    margin-top: 10px; /* Nudge down for perfect centering */
    /* Remove line-height and vertical-align for better flex centering */
}

.tree-node-name[b-cdm94l7ccn] {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.2;
}

.tree-node-content:hover .tree-node-name[b-cdm94l7ccn] {
    color: var(--primary-color);
}

.tree-node-content.current-path .tree-node-name[b-cdm94l7ccn] {
    color: var(--primary-color);
}

.tree-node-content:hover .folder-icon[b-cdm94l7ccn] {
    color: var(--primary-color);
}

.tree-node-content.current-path .folder-icon[b-cdm94l7ccn] {
    color: var(--primary-color);
}

/* Tree node children indentation and animation */
.tree-node-children[b-cdm94l7ccn] {
    margin-left: 20px; /* Proper indentation for child nodes */
    border-left: 1px solid var(--border-color);
    padding-left: 8px;
    animation: slideDown-b-cdm94l7ccn 0.2s ease-out;
    position: relative;
}

.tree-node-children[b-cdm94l7ccn]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-color);
    opacity: 0.5;
}

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

/* Keyboard navigation improvements */
.tree-node-content:focus-visible[b-cdm94l7ccn] {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

/* Drag and drop styles for tree nodes */
.tree-node-content.drag-over-folder[b-cdm94l7ccn] {
    background: rgba(25, 135, 84, 0.1) !important;
    border: 2px dashed var(--bs-success) !important;
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(25, 135, 84, 0.2);
}

.tree-node-content.drag-forbidden[b-cdm94l7ccn] {
    background: rgba(220, 53, 69, 0.1) !important;
    border: 2px dashed var(--bs-danger) !important;
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(220, 53, 69, 0.2);
    cursor: not-allowed;
}

.tree-node-content.drag-over-folder .folder-icon[b-cdm94l7ccn] {
    color: var(--bs-success) !important;
    transform: scale(1.1);
}

.tree-node-content.drag-forbidden .folder-icon[b-cdm94l7ccn] {
    color: var(--bs-danger) !important;
    transform: scale(1.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tree-node-content[b-cdm94l7ccn] {
        padding: 6px 12px;
        min-height: 32px;
    }
    
    .tree-node-name[b-cdm94l7ccn] {
        font-size: 0.9rem;
    }
    
    .tree-node-children[b-cdm94l7ccn] {
        margin-left: 16px;
        padding-left: 12px;
    }
}

/* =========================================
   Cloud Provider Icon Styles for Tree
   ========================================= */

/* Tree view cloud provider icons */
.cloud-provider-icon.tree-icon[b-cdm94l7ccn] {
    width: 20px;
    height: 20px;
    max-width: 20px;
    max-height: 20px;
    margin-top: 0;
    object-fit: contain;
    border-radius: 2px;
    /* Ensure smooth rendering */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
}

/* WebDAV icon fix for dark theme in tree */
[data-theme="dark"] .cloud-provider-icon.tree-icon[src*="WebDAV"][b-cdm94l7ccn] {
    filter: invert(1) brightness(0.9);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    padding: 1px;
}

/* WebDAV icon fix for light theme in tree */
[data-theme="light"] .cloud-provider-icon.tree-icon[src*="WebDAV"][b-cdm94l7ccn] {
    filter: none;
    background-color: transparent;
    padding: 0;
}
/* /Shared/TreeView.razor.rz.scp.css */
/* Tree View Styles */
.tree-view[b-41mc2jt3c5] {
    background: transparent; /* Let parent handle background */
    border-radius: 0; /* Remove border radius since parent has it */
    overflow: hidden;
    height: 100%; /* Fill the container */
    display: flex;
    flex-direction: column;
    box-shadow: none; /* Remove shadow since parent has border */
}

.tree-header[b-41mc2jt3c5] {
    display: none; /* Hide header since parent has its own header */
}

.tree-content[b-41mc2jt3c5] {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto; /* Enable horizontal scrolling */
    padding: 8px 12px;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    min-width: 0; /* Allow content to determine scroll width */
    position: relative;
}

.tree-content[b-41mc2jt3c5]::-webkit-scrollbar {
    width: 6px;
    height: 6px; /* Add horizontal scrollbar */
}

.tree-content[b-41mc2jt3c5]::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 3px;
}

.tree-content[b-41mc2jt3c5]::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 3px;
}

.tree-content[b-41mc2jt3c5]::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

/* Ensure tree content can be wider than container */
.tree-content > .tree-node[b-41mc2jt3c5] {
    min-width: max-content;
}

/* Tree View focus styles */
.tree-view:focus[b-41mc2jt3c5] {
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
}

.tree-view:focus-within[b-41mc2jt3c5] {
    box-shadow: 0 2px 12px rgba(var(--primary-color-rgb, 13, 110, 253), 0.15);
}

/* Improve tree content scrolling */
.tree-content:not(:hover)[b-41mc2jt3c5] {
    scroll-behavior: smooth;
}

/* Ensure minimum width for deep tree structures */
.tree-node[b-41mc2jt3c5] {
    min-width: max-content;
}

.tree-loading[b-41mc2jt3c5],
.tree-error[b-41mc2jt3c5] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.tree-error[b-41mc2jt3c5] {
    color: var(--danger-color);
}

.tree-loading i[b-41mc2jt3c5] {
    color: var(--primary-color);
}

.tree-error i[b-41mc2jt3c5] {
    color: var(--danger-color);
}
/* /Shared/WebDavUserModal.razor.rz.scp.css */
/* WebDAV User Modal Styles */
.modal-overlay[b-gbtikekh9f] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    backdrop-filter: none;
}

.webdav-user-modal[b-gbtikekh9f] {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.webdav-user-modal .modal-header[b-gbtikekh9f] {
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.webdav-user-modal .modal-header h3[b-gbtikekh9f] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.webdav-user-modal .modal-header i[b-gbtikekh9f] {
    color: var(--primary-color);
}

.modal-close-btn[b-gbtikekh9f] {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--border-radius);
    transition: all 0.2s ease;
}

.modal-close-btn:hover[b-gbtikekh9f] {
    color: var(--text-primary);
    background: var(--bg-quaternary);
}

.webdav-user-modal .modal-content[b-gbtikekh9f] {
    padding: 2rem;
    overflow-y: auto;
    flex: 1;
}

/* Alert styles */
.webdav-user-modal .alert[b-gbtikekh9f] {
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    border: 1px solid transparent;
}

.webdav-user-modal .alert-danger[b-gbtikekh9f] {
    background-color: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

.webdav-user-modal .alert-danger i[b-gbtikekh9f] {
    color: #dc3545;
}

.webdav-user-modal .modal-footer[b-gbtikekh9f] {
    background: var(--bg-tertiary);
    border-top: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    flex-shrink: 0;
}

/* Form Styles */
.form-group[b-gbtikekh9f] {
    margin-bottom: 1.5rem;
}

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

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

.form-label[b-gbtikekh9f] {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-label.required[b-gbtikekh9f]::after {
    content: " *";
    color: var(--danger-color);
}

.form-control[b-gbtikekh9f] {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.form-control:focus[b-gbtikekh9f] {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-color-alpha);
}

.form-control:disabled[b-gbtikekh9f] {
    background: var(--bg-quaternary);
    color: var(--text-muted);
    cursor: not-allowed;
}

.form-control.is-invalid[b-gbtikekh9f] {
    border-color: var(--danger-color);
}

.form-control.is-invalid:focus[b-gbtikekh9f] {
    border-color: var(--danger-color);
    box-shadow: 0 0 0 3px var(--danger-color-alpha);
}

.invalid-feedback[b-gbtikekh9f] {
    display: block;
    color: var(--danger-color);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.form-text[b-gbtikekh9f] {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 0.5rem;
    line-height: 1.4;
}

/* Password Input Container */
.password-input-container[b-gbtikekh9f] {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-container .form-control[b-gbtikekh9f] {
    padding-right: 3rem;
}

.password-toggle-btn[b-gbtikekh9f] {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--border-radius-sm);
    transition: all 0.2s ease;
    z-index: 1;
}

.password-toggle-btn:hover[b-gbtikekh9f] {
    color: var(--text-primary);
    background: var(--bg-quaternary);
}

/* Input Group */
.webdav-user-modal .input-group[b-gbtikekh9f] {
    display: flex !important;
    border-radius: 8px;
    overflow: hidden;
    align-items: stretch;
    width: 100%;
}

.webdav-user-modal .input-group .form-control[b-gbtikekh9f] {
    border-radius: 0 !important;
    border-right: none !important;
    flex: 1;
    margin: 0;
}

.webdav-user-modal .input-group .btn[b-gbtikekh9f] {
    border-radius: 0 !important;
    border-left: none !important;
    border-color: var(--border-color);
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin: 0;
}

.webdav-user-modal .input-group .btn:hover[b-gbtikekh9f] {
    background: var(--bg-quaternary);
    color: var(--text-primary);
}

/* Checkbox Label */
.checkbox-label[b-gbtikekh9f] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.4;
}

.checkbox-label input[type="checkbox"][b-gbtikekh9f] {
    width: 18px;
    height: 18px;
    margin: 0;
    margin-top: 0.125rem;
    accent-color: var(--bs-primary);
    cursor: pointer;
    background-color: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 2px;
}

.checkbox-label input[type="checkbox"]:focus[b-gbtikekh9f] {
    outline: 2px solid var(--bs-primary-bg-subtle);
    outline-offset: 2px;
    border-color: var(--bs-primary);
}

.checkbox-label input[type="checkbox"]:checked[b-gbtikekh9f] {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

/* Custom Checkmark Styles (if needed for better cross-browser support) */
.checkmark[b-gbtikekh9f] {
    flex-shrink: 0;
}

/* Button Styles */
.btn[b-gbtikekh9f] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: 2px solid transparent;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
    box-sizing: border-box;
}

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

.btn-primary[b-gbtikekh9f] {
    background: var(--primary-gradient);
    color: white;
    border-color: var(--primary-color);
}

.btn-primary:hover:not(:disabled)[b-gbtikekh9f] {
    background: var(--primary-color-hover);
    border-color: var(--primary-color-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-outline-secondary[b-gbtikekh9f] {
    background: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}

.btn-outline-secondary:hover:not(:disabled)[b-gbtikekh9f] {
    background: var(--bg-quaternary);
    color: var(--text-primary);
    border-color: var(--text-secondary);
}

.btn-sm[b-gbtikekh9f] {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    min-height: 36px;
}

/* Loading Spinner */
.fa-spinner.fa-spin[b-gbtikekh9f] {
    animation: fa-spin-b-gbtikekh9f 1s infinite linear;
}

@keyframes fa-spin-b-gbtikekh9f {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .webdav-user-modal[b-gbtikekh9f] {
        max-width: 95%;
        margin: 1rem;
    }
    
    .webdav-user-modal .modal-header[b-gbtikekh9f],
    .webdav-user-modal .modal-content[b-gbtikekh9f],
    .webdav-user-modal .modal-footer[b-gbtikekh9f] {
        padding: 1rem;
    }
    
    .form-group-row[b-gbtikekh9f] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .webdav-user-modal .modal-footer[b-gbtikekh9f] {
        flex-direction: column-reverse;
    }
}

@media (max-width: 480px) {
    .webdav-user-modal[b-gbtikekh9f] {
        max-width: 100%;
        margin: 0.5rem;
        max-height: 95vh;
    }
    
    .webdav-user-modal .modal-header h3[b-gbtikekh9f] {
        font-size: 1.1rem;
    }
    
    .form-control[b-gbtikekh9f],
    .btn[b-gbtikekh9f] {
        font-size: 0.9rem;
    }
    
    .webdav-user-modal .input-group[b-gbtikekh9f] {
        flex-direction: column;
    }
    
    .webdav-user-modal .input-group .btn[b-gbtikekh9f] {
        border-radius: 0 0 8px 8px;
        border-left: var(--border-color);
        border-top: none;
    }
    
    .webdav-user-modal .input-group .form-control[b-gbtikekh9f] {
        border-radius: 8px 8px 0 0;
        border-right: var(--border-color);
    }
}