.drag-drop-area{position:relative;border:2px dashed #ccc;border-radius:10px;background-color:#fafafa;padding:40px 20px;text-align:center;margin-bottom:20px;transition:all .3s ease;cursor:pointer}.drag-drop-area:hover{border-color:#5bc0de;background-color:#f0f9ff}.drag-drop-area.drag-over{border-color:#5cb85c;background-color:#f0fff0;border-style:solid}.drag-drop-content{position:relative;z-index:1}.drag-drop-icon{font-size:48px;color:#ccc;margin-bottom:15px}.drag-drop-area:hover .drag-drop-icon{color:#5bc0de}.drag-drop-area.drag-over .drag-drop-icon{color:#5cb85c}.drag-drop-area h4{color:#666;margin-bottom:10px;font-weight:300}.drag-drop-area p{color:#999;margin-bottom:15px}.drag-drop-area .btn{margin:0 5px}.drag-drop-overlay{position:absolute;inset:0;background-color:#5cb85ce6;border-radius:8px;display:none;align-items:center;justify-content:center;z-index:2}.drag-drop-area.drag-over .drag-drop-overlay{display:flex}.drag-drop-overlay-content{text-align:center;color:#fff}.drag-drop-overlay-content .glyphicon{font-size:64px;margin-bottom:15px;display:block}.drag-drop-overlay-content p{font-size:18px;font-weight:700;margin:0}.selected-files-container{background-color:#f9f9f9;border:1px solid #ddd;border-radius:5px;padding:15px;margin-bottom:20px}.selected-files-container h5{margin-top:0;margin-bottom:15px;color:#666}.selected-files-list{max-height:200px;overflow-y:auto;margin-bottom:15px}.file-item{display:flex;align-items:flex-start;padding:8px 12px;background-color:#fff;border:1px solid #e0e0e0;border-radius:4px;margin-bottom:5px;position:relative;min-height:40px;transition:min-height .3s cubic-bezier(.4,0,.2,1),padding .3s cubic-bezier(.4,0,.2,1);will-change:min-height,padding}.file-item.uploading{min-height:80px;padding:12px 12px 35px}.file-item:last-child{margin-bottom:0}.file-item .file-icon{font-size:16px;margin-right:10px;color:#666}.file-item .file-info{flex:1;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;margin-top:2px}.file-item:not(.uploading) .file-info{flex-direction:row;justify-content:space-between;align-items:center;margin-top:0}.file-item .file-name{font-weight:500;color:#333;word-break:break-all}.file-item .file-size{font-size:12px;color:#999;margin-left:10px;margin-top:2px}.file-item:not(.uploading) .file-size{margin-top:0}.file-item .file-remove{background:none;border:none;color:#d9534f;cursor:pointer;padding:0;margin-left:10px;font-size:16px}.file-item .file-remove:hover{color:#c9302c}.file-item .upload-progress{position:absolute;bottom:8px;left:12px;right:12px;height:4px;background-color:#e0e0e0;border-radius:2px;box-shadow:inset 0 1px 2px #0000001a}.file-item .upload-progress-bar{height:100%;background:linear-gradient(90deg,#5cb85c,#449d44);border-radius:2px;width:0%;transition:width .4s cubic-bezier(.4,0,.2,1);box-shadow:0 1px 2px #5cb85c4d;will-change:width}.file-item .upload-status{position:absolute;bottom:16px;right:12px;font-size:10px;color:#666;background-color:#fffffff2;padding:3px 8px;border-radius:12px;border:1px solid #ddd;box-shadow:0 1px 3px #0000001a;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:2}.file-item .upload-controls{position:absolute;top:8px;right:40px;display:none;gap:3px;z-index:3}.file-item.uploading .upload-controls,.file-item:hover .upload-controls{display:flex}.upload-control-btn{background:#fff;border:1px solid #ddd;border-radius:6px;color:#444;cursor:pointer;padding:6px 10px;font-size:14px;line-height:1;transition:all .2s ease}.upload-control-btn:hover{background-color:#f0f0f0;border-color:#999}.upload-control-btn.pause{color:#f0ad4e}.upload-control-btn.resume{color:#5cb85c}.upload-control-btn.cancel{color:#d9534f}.upload-control-btn--lg{padding:8px 12px;font-size:16px;border-radius:8px}.upload-controls.upload-controls--lg{gap:8px}.upload-method-indicator{position:absolute;top:8px;left:12px;font-size:8px;padding:2px 6px;border-radius:10px;font-weight:700;text-transform:uppercase;z-index:2;box-shadow:0 1px 2px #0000001a}.upload-method-indicator.resumable{background-color:#d4edda;color:#155724;border:1px solid #c3e6cb}.upload-method-indicator.fallback{background-color:#fff3cd;color:#856404;border:1px solid #faebd7}.upload-method-indicator.failed{background-color:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.file-item .detailed-progress{position:absolute;bottom:20px;left:32px;right:120px;font-size:10px;color:#666;display:none;background-color:#ffffffe6;padding:2px 6px;border-radius:8px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.file-item.uploading .detailed-progress{display:block}.detailed-progress .progress-text{display:flex;justify-content:space-between;margin-bottom:1px;font-weight:500}.detailed-progress .speed-info{color:#999;font-size:9px;text-align:center}.file-item.completed{background-color:#d4edda;border-color:#c3e6cb}.file-item.failed{background-color:#f8d7da;border-color:#f5c6cb}.file-item.paused{background-color:#fff3cd;border-color:#faebd7}.global-upload-status{position:fixed;top:20px;right:20px;background-color:#fff;border:1px solid #ddd;border-radius:5px;padding:15px;box-shadow:0 2px 10px #0000001a;min-width:300px;z-index:1000;display:none}.global-upload-status.active{display:block}.global-upload-status h6{margin-top:0;margin-bottom:10px;color:#666}.global-upload-progress{width:100%;height:8px;background-color:#e0e0e0;border-radius:4px;margin-bottom:10px;overflow:hidden}.global-upload-progress-bar{height:100%;background-color:#5cb85c;width:0%;transition:width .3s ease}.global-upload-info{display:flex;justify-content:space-between;font-size:12px;color:#666}@keyframes pulse{0%{opacity:1}50%{opacity:.7}to{opacity:1}}@keyframes shimmer{0%{background-position:-200px 0}to{background-position:calc(200px + 100%) 0}}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.file-item.uploading .upload-progress-bar{background:linear-gradient(90deg,#5cb85c,#449d44,#5cb85c);background-size:200px 100%;animation:shimmer 2s infinite linear}.file-item.uploading .upload-status{animation:pulse 3s infinite}.file-item.uploading .detailed-progress{animation:slideDown .3s ease-out}@keyframes completed{0%{transform:scale(1)}50%{transform:scale(1.02)}to{transform:scale(1)}}.file-item.completed{animation:completed .6s ease-out}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-3px)}75%{transform:translate(3px)}}.file-item.failed{animation:shake .5s ease-out}.form-upload-progress{position:relative;width:100%;height:18px;background-color:#eee;border-radius:9px;overflow:hidden}.form-upload-progress-bar{position:absolute;top:0;left:0;height:100%;width:0%;background:linear-gradient(90deg,#5cb85c,#449d44,#5cb85c);background-size:200px 100%;animation:shimmer 2s infinite linear}.form-upload-progress-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;color:#1a1a1a;text-shadow:0 1px 2px rgba(255,255,255,.6);pointer-events:none}.form-upload-progress-overlay .sep{color:#888}.selected-files-list .file-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;min-height:44px}.selected-files-list .file-item .upload-controls{display:flex!important}.selected-files-list .file-item .file-icon,.selected-files-list .file-item .file-info,.selected-files-list .file-item .file-size,.selected-files-list .file-item .file-remove,.selected-files-list .file-item .upload-progress,.selected-files-list .file-item .upload-status,.selected-files-list .file-item .detailed-progress{display:none!important}.selected-files-list .file-item .file-name{display:inline-flex!important;align-items:center;flex:1 1 auto;margin-right:12px;font-weight:500;color:#333;word-break:break-all}.drag-drop-area--compact{padding:16px 12px;margin-bottom:12px}.drag-drop-area--compact .drag-drop-icon{font-size:28px;margin-bottom:8px}.drag-drop-area--compact h4{font-size:16px;margin-bottom:6px;font-weight:500}.drag-drop-area--compact p{margin-bottom:8px}.drag-drop-area--compact .btn{margin:0 4px;padding:4px 10px;font-size:13px;line-height:1.2}.drag-drop-area--compact .drag-drop-overlay-content .glyphicon{font-size:40px;margin-bottom:8px}.drag-drop-area--compact .drag-drop-overlay-content p{font-size:14px}@media (max-width: 768px){.drag-drop-area{padding:30px 15px}.drag-drop-icon{font-size:36px;margin-bottom:10px}.drag-drop-area h4{font-size:18px}.drag-drop-area .btn{font-size:14px;margin:5px 2px}.drag-drop-overlay-content .glyphicon{font-size:48px}.drag-drop-overlay-content p{font-size:16px}.file-item{padding:6px 10px;min-height:36px}.file-item.uploading{min-height:70px;padding:10px 10px 30px}.file-item .file-name{font-size:14px}.file-item .file-size{font-size:11px}.file-item .upload-controls{right:30px}.file-item .detailed-progress{left:24px;right:80px;bottom:16px;font-size:9px}}@media (max-width: 480px){.drag-drop-area{padding:20px 10px}.drag-drop-area .btn{display:block;width:100%;margin:5px 0}.file-item{min-height:32px}.file-item.uploading{min-height:60px;padding:8px 8px 25px}.file-item .file-info{flex-direction:column;align-items:flex-start}.file-item .file-size{margin-left:0;margin-top:2px}.file-item .upload-controls{right:25px;top:4px;gap:2px}.file-item .detailed-progress{left:20px;right:60px;bottom:12px;font-size:8px}.upload-method-indicator{left:8px;top:4px;font-size:7px;padding:1px 4px}}
