* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }
        body { background: #f5f5f5; color: #333; line-height: 1.5; }
        .container { max-width: 1200px; margin: 0 auto; padding: 15px; }
        header { text-align: center; margin-bottom: 20px; padding: 15px; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); color: white; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
        h1 { font-size: 1.8rem; margin-bottom: 5px; }
        .nav-buttons { margin-top: 10px; }
        .nav-button { display: inline-block; background: rgba(255,255,255,0.2); color: white; border: 1px solid white; padding: 5px 10px; margin: 0 5px; text-decoration: none; border-radius: 3px; transition: all 0.3s; }
        .nav-button:hover { background: rgba(255,255,255,0.3); transform: translateY(-2px); }
        .upload-section { background: white; padding: 15px; margin-bottom: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .upload-area { border: 2px dashed #6a11cb; border-radius: 5px; padding: 20px; margin: 10px 0; text-align: center; cursor: pointer; background: #f8f9ff; transition: all 0.3s; }
        .upload-area:hover { background: #eef2ff; border-color: #2575fc; }
        .upload-btn { background: #6a11cb; color: white; border: none; padding: 8px 20px; border-radius: 3px; cursor: pointer; margin-top: 10px; transition: all 0.3s; }
        .upload-btn:hover { background: #2575fc; transform: translateY(-2px); }
        .upload-btn:disabled { background: #ccc; cursor: not-allowed; transform: none; }
        .progress-container { margin-top: 10px; display: none; }
        .progress-bar { width: 100%; height: 8px; background: #e0e0e0; border-radius: 4px; overflow: hidden; }
        .progress { height: 100%; background: #6a11cb; transition: width 0.2s; }
        .progress-info { display: flex; justify-content: space-between; font-size: 0.8rem; margin-bottom: 5px; }
        .file-progress-info { margin-top: 8px; font-size: 0.8rem; }
        .file-list-container { display: flex; gap: 15px; }
        .file-column { flex: 1; background: white; padding: 15px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
        .column-title { font-size: 1.2rem; margin-bottom: 10px; padding-bottom: 5px; border-bottom: 1px solid #eee; }
        .search-container { margin-bottom: 10px; }
        .search-input { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 3px; }
        .file-list { list-style: none; max-height: 400px; overflow-y: auto; }
        .file-item { display: flex; align-items: flex-start; padding: 10px; border-bottom: 1px solid #f0f0f0; transition: background 0.2s; }
        .file-item:hover { background: #f9f9f9; }
        .file-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #eef2ff; border-radius: 4px; margin-right: 10px; color: #6a11cb; flex-shrink: 0; margin-top: 2px; }
        .file-info { flex: 1; min-width: 0; }
        .file-name { font-weight: bold; margin-bottom: 5px; word-wrap: break-word; overflow-wrap: break-word; white-space: normal; line-height: 1.3; }
        .file-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; color: #666; }
        .file-size { flex-shrink: 0; margin-left: 10px; }
        .file-date { color: #888; }
        .file-actions { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
        .preview-btn, .download-btn, .delete-btn, .play-btn { padding: 4px 8px; border: none; border-radius: 3px; cursor: pointer; font-size: 0.75rem; color: white; transition: all 0.2s; }
        .preview-btn { background: #17a2b8; }
        .preview-btn:hover { background: #138496; }
        .download-btn { background: #28a745; }
        .download-btn:hover { background: #218838; }
        .delete-btn { background: #dc3545; }
        .delete-btn:hover { background: #c82333; }
        .play-btn { background: #9c27b0; }
        .play-btn:hover { background: #7b1fa2; }
        .empty-message { text-align: center; color: #999; padding: 20px 0; }
        .status-message { padding: 8px; border-radius: 3px; margin: 5px 0; text-align: center; display: none; }
        .status-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .status-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }

        .preview-modal { 
            display: none; 
            position: fixed; 
            top: 0; 
            left: 0; 
            width: 100%; 
            height: 100%; 
            background: rgba(0,0,0,0.9); 
            z-index: 1000; 
            justify-content: center; 
            align-items: center; 
        }
        .preview-content { 
            max-width: 95%; 
            max-height: 95%; 
            background: white; 
            border-radius: 8px; 
            overflow: hidden; 
            display: flex;
            flex-direction: column;
        }
        .preview-header { 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            padding: 15px; 
            background: #2c3e50; 
            color: white; 
            border-bottom: 1px solid #34495e; 
        }
        .preview-body { 
            position: relative;
            flex: 1; 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            padding: 20px; 
            background: #1a1a1a;
            overflow: auto;
            min-height: 300px;
        }
        .preview-image, .preview-video, .preview-audio { 
            max-width: 100%; 
            max-height: 100%; 
            display: block; 
        }
        .preview-video {
            width: auto;
            height: auto;
            max-width: 90vw;
            max-height: 80vh;
        }
        .preview-audio { 
            width: 400px; 
            padding: 20px; 
            background: white;
            border-radius: 8px;
        }
        .preview-footer { 
            padding: 15px; 
            background: #ecf0f1; 
            border-top: 1px solid #bdc3c7; 
            text-align: center; 
        }
        
        .preview-nav-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 1002;
            opacity: 0.7;
        }
        
        .preview-nav-btn:hover {
            background: rgba(0, 0, 0, 0.9);
            opacity: 1;
            transform: translateY(-50%) scale(1.1);
        }
        
        .preview-prev-btn {
            left: 20px;
        }
        
        .preview-next-btn {
            right: 20px;
        }
        
        .preview-nav-btn:disabled {
            opacity: 0.3;
            cursor: not-allowed;
            background: rgba(0, 0, 0, 0.5);
        }
        
        .preview-nav-btn:disabled:hover {
            transform: translateY(-50%);
            opacity: 0.3;
        }
        
        .preview-counter {
            position: absolute;
            bottom: 4px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 6px 12px;
            border-radius: 15px;
            font-size: 10px;
            z-index: 1002; 
            opacity: 1;
            transition: opacity 0.5s ease;
        }
        
        .preview-content-container {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 100%;
            z-index: 1001;
        }
        
        .music-player { 
            display: none; 
            position: fixed; 
            bottom: 20px; 
            right: 20px; 
            width: 350px; 
            background: white; 
            border-radius: 10px; 
            box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
            z-index: 1001; 
            border: 1px solid #ddd;
        }
        .player-header { 
            background: linear-gradient(135deg, #9c27b0, #673ab7); 
            color: white; 
            padding: 12px 15px; 
            border-radius: 10px 10px 0 0; 
            display: flex; 
            justify-content: space-between; 
            align-items: center; 
            min-height: 50px;
        }
        .player-title { 
            font-weight: bold; 
            flex: 1;
            overflow: hidden; 
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 10px;
            font-size: 0.9rem;
        }
        .player-close { 
            background: none; 
            border: none; 
            color: white; 
            font-size: 1.2rem; 
            cursor: pointer; 
            flex-shrink: 0; 
            width: 24px; 
            height: 24px; 
            display: flex; 
            align-items: center; 
            justify-content: center; 
            border-radius: 50%; 
            transition: background-color 0.2s;
        }
        .player-close:hover {
            background: rgba(255,255,255,0.2);
        }
        .player-body { 
            padding: 15px; 
        }
        .player-controls { 
            display: flex; 
            justify-content: center; 
            align-items: center; 
            gap: 15px; 
            margin-bottom: 10px; 
        }
        .player-btn { 
            background: none; 
            border: none; 
            font-size: 1.5rem; 
            cursor: pointer; 
            color: #6a11cb; 
            padding: 5px;
            border-radius: 50%;
            transition: background-color 0.2s;
        }
        .player-btn:hover {
            background: #f0f0f0;
        }
        .player-progress { 
            margin: 10px 0; 
        }
        .progress-time { 
            display: flex; 
            justify-content: space-between; 
            font-size: 0.8rem; 
            color: #666; 
        }
        .player-progress-bar { 
            width: 100%; 
            height: 6px; 
            background: #e0e0e0; 
            border-radius: 3px; 
            overflow: hidden; 
            cursor: pointer; 
            margin-top: 5px;
        }
        .progress-played { 
            height: 100%; 
            background: #9c27b0; 
            width: 0%; 
            transition: width 0.1s; 
        }
        .volume-control { 
            display: flex; 
            align-items: center; 
            gap: 8px; 
            margin-top: 10px; 
        }
        .volume-slider { 
            flex: 1; 
            height: 4px; 
            background: #e0e0e0; 
            border-radius: 2px; 
            position: relative; 
            cursor: pointer; 
        }
        .volume-level { 
            height: 100%; 
            background: #9c27b0; 
            border-radius: 2px; 
            width: 80%; 
        }
        
        .cpolar-button {
            position: fixed;
            left: 20px;
            bottom: 20px;
            background: linear-gradient(135deg, #ff6b00 0%, #fdbb2d 100%);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(255, 107, 0, 0.3);
            transition: all 0.3s ease;
            z-index: 999;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .cpolar-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(255, 107, 0, 0.4);
            background: linear-gradient(135deg, #fdbb2d 0%, #ff6b00 100%);
        }
        footer { text-align: center; margin-top: 20px; padding: 15px; color: #666; }
        
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .header-left {
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .header-left h1 {
            margin: 0;
        }

        .announcement-btn {
            display: inline-block;
            background: rgba(255,255,255,0.2);
            color: white;
            border: 1px solid white;
            padding: 5px 10px;
            text-decoration: none;
            border-radius: 3px;
            transition: all 0.3s;
            cursor: pointer;
            font-size: 0.9rem;
            white-space: nowrap;
        }

        .announcement-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }

        .announcement-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.7);
            z-index: 2000;
            justify-content: center;
            align-items: center;
            backdrop-filter: blur(5px);
        }

        .announcement-content {
            background: white;
            border-radius: 15px;
            width: 90%;
            max-width: 800px;
            max-height: 90vh;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            animation: modalSlideIn 0.3s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .announcement-header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 20px 25px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #e0e0e0;
        }

        .announcement-header h2 {
            margin: 0;
            font-size: 1.5rem;
            font-weight: bold;
        }

        .announcement-close {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            font-size: 1.8rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }

        .announcement-close:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: rotate(90deg);
        }

        .announcement-body {
            padding: 25px;
            max-height: 60vh;
            overflow-y: auto;
            background: #f8f9fa;
        }

        .convention-content {
            line-height: 1.8;
            font-size: 1rem;
            color: #333;
        }

        .convention-content p {
            margin-bottom: 20px;
            padding: 15px;
            background: white;
            border-radius: 10px;
            border-left: 4px solid #6a11cb;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s ease;
        }

        .convention-content p:hover {
            transform: translateX(5px);
        }

        .convention-content strong {
            color: #6a11cb;
            font-size: 1.05rem;
        }

        .announcement-footer {
            padding: 20px 25px;
            background: #f8f9fa;
            border-top: 1px solid #e0e0e0;
            text-align: center;
        }

        .announcement-confirm {
            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
        }

        .announcement-confirm:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(40, 167, 69, 0.4);
            background: linear-gradient(135deg, #20c997 0%, #28a745 100%);
        }

        @media (max-width: 768px) {
            .file-list-container { flex-direction: column; }
            .file-actions { flex-direction: row; }
            .file-item { flex-direction: column; align-items: flex-start; }
            .file-actions { margin-top: 8px; width: 100%; }
            .file-actions button { flex: 1; margin-bottom: 5px; }
            .file-meta { flex-direction: column; align-items: flex-start; }
            .file-size { margin-left: 0; margin-top: 3px; }
            .music-player { width: calc(100% - 40px); right: 20px; bottom: 80px; }
            .preview-audio { width: 100%; }
            .preview-video { max-width: 100%; }
            .cpolar-button {
                left: 10px;
                bottom: 10px;
                padding: 8px 12px;
                font-size: 0.8rem;
            }
            
            .preview-nav-btn {
                width: 40px;
                height: 40px;
                font-size: 20px;
            }
            
            .preview-prev-btn {
                left: 10px;
            }
            
            .preview-next-btn {
                right: 10px;
            }
            
            .header-top {
                flex-direction: column;
                gap: 10px;
                text-align: center;
            }

            .header-left {
                justify-content: center;
                flex-wrap: wrap;
                gap: 10px;
            }

            .announcement-content {
                width: 95%;
                margin: 10px;
            }

            .announcement-header {
                padding: 15px 20px;
            }

            .announcement-header h2 {
                font-size: 1.3rem;
            }

            .announcement-body {
                padding: 15px;
                max-height: 50vh;
            }

            .convention-content p {
                padding: 12px;
                font-size: 0.95rem;
            }

            .announcement-btn {
                order: -1; 
            }
        }

        @media (max-width: 480px) {
            .announcement-content {
                border-radius: 10px;
            }

            .announcement-header {
                padding: 12px 15px;
            }

            .announcement-header h2 {
                font-size: 1.2rem;
            }

            .announcement-body {
                padding: 12px;
            }

            .convention-content p {
                padding: 10px;
                font-size: 0.9rem;
                margin-bottom: 15px;
            }

            .announcement-confirm {
                padding: 10px 25px;
                font-size: 0.9rem;
            }

            .header-left {
                flex-direction: column;
                gap: 8px;
            }

            .announcement-btn {
                align-self: center;
            }
            
            .preview-nav-btn {
                width: 35px;
                height: 35px;
                font-size: 18px;
            }
            
            .preview-prev-btn {
                left: 5px;
            }
            
            .preview-next-btn {
                right: 5px;
            }
            
            .preview-counter {
                font-size: 12px;
                padding: 6px 12px;
            }
            /* components/button.css */
            .btn {
                padding: 8px 16px;
                border-radius: 4px;
                border: none;
                cursor: pointer;
                transition: all 0.3s;
            }

            .btn-primary { background: #6a11cb; color: white; }
            .btn-secondary { background: #2575fc; color: white; }
            .btn-danger { background: #dc3545; color: white; }

            /* components/file-item.css */
            .file-item {
                display: grid;
                grid-template-columns: auto 1fr auto;
                gap: 12px;
                padding: 12px;
                border-bottom: 1px solid #eee;
                transition: background 0.2s;
            }

            .file-item:hover {
                background: #f8f9fa;
            }

            /* utilities.css */
            .text-truncate {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .flex-center {
                display: flex;
                align-items: center;
                justify-content: center;
            }

            /* 响应式设计增强 */
            @media (prefers-color-scheme: dark) {
                :root {
                    --bg-primary: #1a1a1a;
                    --bg-secondary: #2d2d2d;
                    --text-primary: #ffffff;
                    --text-secondary: #cccccc;
                }
            }
	}