.media-library{display:flex;flex-direction:column;height:100%;min-height:400px;background:#ffffff;border-radius:8px;overflow:hidden;border:1px solid #e5e7eb}.media-library-header{padding:16px 20px;border-bottom:1px solid #e5e7eb;background:#f9fafb;flex-shrink:0}.media-library-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.media-library-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.media-library-upload-btn{padding:6px 16px;background:#3b82f6;color:white;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:background-color .2s}.media-library-upload-btn:hover{background:#2563eb}.media-library-upload-btn:disabled{opacity:.5;cursor:not-allowed}.media-library-view-toggle{display:flex;gap:2px;border:1px solid #d1d5db;border-radius:6px;overflow:hidden;background:white}.media-library-view-toggle button{padding:4px 12px;background:transparent;border:none;cursor:pointer;font-size:13px;transition:all .2s}.media-library-view-toggle button:hover{background:#f3f4f6}.media-library-view-toggle button.active{background:#3b82f6;color:white}.media-library-stats{display:flex;gap:16px;margin-top:8px;font-size:13px;color:#6b7280}.media-library-stats span{display:flex;align-items:center;gap:4px}.media-search{display:flex;gap:8px;flex:1;min-width:200px;max-width:400px}.media-search-input-wrapper{position:relative;flex:1}.media-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:#9ca3af;pointer-events:none}.media-search-input{width:100%;padding:8px 30px 8px 34px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;outline:none;transition:border-color .2s,box-shadow .2s;background:white}.media-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.media-search-input::placeholder{color:#9ca3af}.media-search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:transparent;border:none;cursor:pointer;color:#9ca3af;font-size:16px;padding:2px 4px;border-radius:4px;transition:color .2s}.media-search-clear:hover{color:#374151}.media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;padding:16px 20px;overflow-y:auto;flex:1;align-content:start}.media-grid-empty,.media-grid-loading{display:flex;justify-content:center;align-items:center;height:200px;color:#6b7280;grid-column:1/-1}.media-grid-empty{flex-direction:column;font-size:14px;gap:8px}.media-grid-empty-icon{font-size:48px;opacity:.5}.media-item{position:relative;border:2px solid transparent;border-radius:8px;overflow:hidden;cursor:pointer;background:#f3f4f6;transition:border-color .2s,transform .2s}.media-item:hover{border-color:#d1d5db;transform:translateY(-2px)}.media-item-selected{border-color:#3b82f6}.media-item-thumbnail{position:relative;width:100%;padding-bottom:100%;background:#e5e7eb;overflow:hidden}.media-item-thumbnail img{object-fit:cover}.media-item-icon,.media-item-thumbnail img{position:absolute;top:0;left:0;width:100%;height:100%}.media-item-icon{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:32px;font-weight:600;color:#6b7280;background:#e5e7eb}.media-item-icon span{font-size:11px;margin-top:4px;font-weight:400}.media-item-checkmark{position:absolute;top:8px;right:8px;width:24px;height:24px;background:#3b82f6;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;box-shadow:0 2px 4px rgba(0,0,0,.2)}.media-item-info{padding:8px 10px;background:white}.media-item-name{font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1f2937}.media-item-meta{display:flex;gap:8px;font-size:11px;color:#6b7280;margin-top:4px}.media-item-actions{position:absolute;top:8px;left:8px;display:flex;gap:4px;opacity:0;transition:opacity .2s}.media-item:hover .media-item-actions{opacity:1}.media-item-delete,.media-item-edit{padding:4px 10px;border:none;border-radius:4px;font-size:12px;cursor:pointer;transition:all .2s}.media-item-edit{background:#ffffff;color:#374151;box-shadow:0 2px 4px rgba(0,0,0,.1)}.media-item-edit:hover{background:#f3f4f6}.media-item-delete{background:#ef4444;color:white;box-shadow:0 2px 4px rgba(0,0,0,.1)}.media-item-delete:hover{background:#dc2626}.media-library-upload-section{padding:16px 20px;border-bottom:1px solid #e5e7eb;background:#fafafa;flex-shrink:0}.media-upload-container{width:100%}.media-upload-dashboard{width:100%;min-height:200px}.media-library-error{background:#fef2f2;color:#dc2626;border-bottom:1px solid #fecaca}.media-library-error,.media-library-footer{padding:12px 20px;font-size:14px;flex-shrink:0}.media-library-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #e5e7eb;background:#f9fafb}.media-library-footer-actions{display:flex;gap:8px}.media-library-footer-actions button{padding:4px 12px;border:1px solid #d1d5db;border-radius:4px;background:white;cursor:pointer;font-size:13px;transition:all .2s}.media-library-footer-actions button:hover:not(:disabled){background:#f3f4f6}.media-library-footer-actions button:disabled{opacity:.4;cursor:not-allowed}.media-picker-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.media-picker-modal{background:white;border-radius:12px;width:90%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.media-picker-modal--fullscreen{width:100vw;height:100vh;max-width:100vw;max-height:100vh;border-radius:0}.media-picker-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid #e5e7eb;flex-shrink:0}.media-picker-header h2{margin:0;font-size:18px;font-weight:600;color:#1f2937}.media-picker-header-actions{display:flex;align-items:center;gap:4px}.media-picker-maximize{background:transparent;border:none;font-size:18px;line-height:1;cursor:pointer;color:#6b7280;padding:4px 8px;border-radius:4px;transition:all .2s}.media-picker-maximize:hover{color:#374151;background:#f3f4f6}.media-picker-close{background:transparent;border:none;font-size:24px;line-height:1;cursor:pointer;color:#6b7280;padding:4px 8px;border-radius:4px;transition:all .2s}.media-picker-close:hover{color:#374151;background:#f3f4f6}.media-picker-body{flex:1;overflow:hidden;display:flex;flex-direction:column}@media (max-width:768px){.media-library-toolbar{flex-direction:column;align-items:stretch}.media-search{max-width:100%;min-width:unset}.media-library-actions{margin-left:0;justify-content:flex-start}.media-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));padding:12px 16px}.media-picker-modal{width:100%;max-width:100%;max-height:100vh;border-radius:0;height:100vh}.media-library-header,.media-library-upload-section{padding:12px 16px}.media-library-footer{padding:12px 16px}.media-library-footer,.media-library-stats{flex-wrap:wrap;gap:8px}}@media (max-width:480px){.media-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px;padding:8px 12px}.media-item-info{padding:4px 6px}.media-item-name{font-size:11px}.media-item-meta{font-size:10px}.media-library-actions{flex-wrap:wrap}.media-picker-header{padding:12px 16px}.media-picker-header h2{font-size:16px}}.media-grid::-webkit-scrollbar{width:6px}.media-grid::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.media-grid::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.media-grid::-webkit-scrollbar-thumb:hover{background:#9ca3af}