:root{--video-primary: #6366f1;--video-primary-dark: #4f46e5;--video-primary-light: #818cf8;--video-secondary: #10b981;--video-accent: #f59e0b;--video-danger: #ef4444;--video-dark: #1e293b;--video-gray-50: #f8fafc;--video-gray-100: #f1f5f9;--video-gray-200: #e2e8f0;--video-gray-300: #cbd5e1;--video-gray-400: #94a3b8;--video-gray-500: #64748b;--video-gray-600: #475569;--video-gray-700: #334155;--video-gray-800: #1e293b;--video-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--video-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--video-radius: 12px;--video-radius-lg: 16px;--video-transition: all .3s cubic-bezier(.4, 0, .2, 1)}.videos-page{padding:24px;max-width:1600px;margin:0 auto;min-height:100vh;background:linear-gradient(135deg,#f8fafc,#e2e8f0)}.videos-header{background:linear-gradient(135deg,var(--video-primary) 0%,var(--video-primary-dark) 100%);border-radius:var(--video-radius-lg);padding:32px;margin-bottom:24px;box-shadow:var(--video-shadow-lg)}.header-content{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.header-title{display:flex;align-items:center;gap:16px;color:#fff}.header-icon{font-size:48px;opacity:.9}.header-title h1{font-size:28px;font-weight:700;margin:0;color:#fff}.header-title p{margin:4px 0 0;opacity:.85;font-size:14px}.btn-add-video{display:flex;align-items:center;gap:8px;background:#fff;color:var(--video-primary);border:none;padding:12px 24px;border-radius:var(--video-radius);font-weight:600;font-size:14px;cursor:pointer;transition:var(--video-transition);box-shadow:var(--video-shadow)}.btn-add-video:hover{transform:translateY(-2px);box-shadow:var(--video-shadow-lg)}.videos-filters{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap;background:#fff;padding:16px 24px;border-radius:var(--video-radius);box-shadow:var(--video-shadow)}.search-box{position:relative;flex:1;min-width:250px;max-width:400px}.search-box .search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--video-gray-400)}.search-box input{width:100%;padding:12px 40px;border:2px solid var(--video-gray-200);border-radius:var(--video-radius);font-size:14px;transition:var(--video-transition);background:var(--video-gray-50)}.search-box input:focus{outline:none;border-color:var(--video-primary);background:#fff}.clear-search{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--video-gray-400);cursor:pointer;padding:4px}.filter-dropdown{position:relative;display:flex;align-items:center;gap:8px}.filter-dropdown .filter-icon{color:var(--video-gray-400)}.filter-dropdown select{padding:12px 16px;border:2px solid var(--video-gray-200);border-radius:var(--video-radius);font-size:14px;background:var(--video-gray-50);cursor:pointer;transition:var(--video-transition);min-width:150px}.filter-dropdown select:focus{outline:none;border-color:var(--video-primary);background:#fff}.results-info{color:var(--video-gray-500);font-size:14px;margin-left:auto}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;background:#fff;border-radius:var(--video-radius-lg);box-shadow:var(--video-shadow)}.loading-state svg,.empty-state svg{font-size:48px;color:var(--video-primary);margin-bottom:16px}.empty-state svg{color:var(--video-gray-300)}.loading-state p,.empty-state h3,.empty-state p{margin:0;text-align:center}.empty-state h3{font-size:20px;color:var(--video-gray-700);margin-bottom:8px}.empty-state p{color:var(--video-gray-500);margin-bottom:20px}.videos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}.video-card{background:#fff;border-radius:var(--video-radius-lg);overflow:hidden;box-shadow:var(--video-shadow);transition:var(--video-transition)}.video-card:hover{transform:translateY(-4px);box-shadow:var(--video-shadow-lg)}.video-card.inactive{opacity:.7}.video-card.inactive .video-thumbnail img{filter:grayscale(30%)}.video-thumbnail{position:relative;aspect-ratio:16/9;cursor:pointer;overflow:hidden}.video-thumbnail img{width:100%;height:100%;object-fit:cover;transition:var(--video-transition)}.video-card:hover .video-thumbnail img{transform:scale(1.05)}.play-overlay{position:absolute;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--video-transition)}.play-overlay svg{font-size:48px;color:#fff;transform:scale(.8);transition:var(--video-transition)}.video-thumbnail:hover .play-overlay{opacity:1}.video-thumbnail:hover .play-overlay svg{transform:scale(1)}.video-type-indicator{position:absolute;top:12px;left:12px;background:#000000b3;color:#fff;padding:6px 10px;border-radius:8px;font-size:14px}.inactive-badge{position:absolute;top:12px;right:12px;background:var(--video-danger);color:#fff;padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;text-transform:uppercase}.video-info{padding:16px}.video-info h3{margin:0 0 12px;font-size:16px;font-weight:600;color:var(--video-gray-800);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4}.video-meta{display:flex;align-items:center;gap:6px;margin:0 0 8px;font-size:13px;color:var(--video-gray-500)}.type-badge{display:inline-flex;align-items:center;gap:6px;background:var(--video-gray-100);padding:4px 10px;border-radius:6px;font-size:12px;font-weight:500;color:var(--video-gray-600)}.type-badge svg{font-size:12px}.video-actions{display:flex;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--video-gray-100)}.btn-action{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:8px;cursor:pointer;transition:var(--video-transition);font-size:14px}.btn-action.play{background:var(--video-primary);color:#fff}.btn-action.play:hover{background:var(--video-primary-dark)}.btn-action.toggle{background:var(--video-gray-100);color:var(--video-secondary)}.btn-action.toggle:hover{background:var(--video-secondary);color:#fff}.btn-action.edit{background:var(--video-gray-100);color:var(--video-accent)}.btn-action.edit:hover{background:var(--video-accent);color:#fff}.btn-action.delete{background:var(--video-gray-100);color:var(--video-danger)}.btn-action.delete:hover{background:var(--video-danger);color:#fff}.videos-pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:32px;padding:20px;background:#fff;border-radius:var(--video-radius);box-shadow:var(--video-shadow)}.pagination-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;background:var(--video-gray-100);border:none;border-radius:var(--video-radius);font-size:14px;font-weight:500;color:var(--video-gray-600);cursor:pointer;transition:var(--video-transition)}.pagination-btn:hover:not(:disabled){background:var(--video-primary);color:#fff}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-info{color:var(--video-gray-600);font-size:14px;font-weight:500}.video-modal-backdrop{position:fixed;inset:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.video-modal-content{background:#fff;border-radius:var(--video-radius-lg);width:100%;max-width:1000px;max-height:90vh;overflow:hidden;position:relative;animation:modalSlideIn .3s ease-out}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.video-modal-close{position:absolute;top:16px;right:16px;background:#00000080;color:#fff;border:none;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;z-index:10;transition:var(--video-transition)}.video-modal-close:hover{background:var(--video-danger)}.video-modal-header{padding:20px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--video-gray-100)}.video-modal-header h2{margin:0;font-size:20px;font-weight:600;color:var(--video-gray-800)}.video-type-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:8px;font-size:12px;font-weight:600}.video-type-badge.youtube{background:#fee2e2;color:#dc2626}.video-type-badge.vimeo{background:#dbeafe;color:#2563eb}.video-type-badge.upload{background:#d1fae5;color:#059669}.video-type-badge.url{background:#fef3c7;color:#d97706}.video-player-wrapper{aspect-ratio:16/9;background:#000}.video-player-wrapper iframe,.video-player-wrapper video{width:100%;height:100%;border:none}.video-modal-description{padding:16px 24px;background:var(--video-gray-50);border-top:1px solid var(--video-gray-100)}.video-modal-description p{margin:0;color:var(--video-gray-600);font-size:14px;line-height:1.6}.video-modal-meta{padding:16px 24px;display:flex;gap:24px;color:var(--video-gray-500);font-size:13px}.video-modal-meta span{display:flex;align-items:center;gap:6px}.video-form-modal{background:#fff;border-radius:var(--video-radius-lg);width:100%;max-width:600px;max-height:90vh;overflow-y:auto;animation:modalSlideIn .3s ease-out}.video-form-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--video-gray-100);position:sticky;top:0;background:#fff;z-index:10}.video-form-header h2{margin:0;font-size:20px;font-weight:600;color:var(--video-gray-800)}.video-form-header .close-btn{background:var(--video-gray-100);border:none;width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--video-gray-500);transition:var(--video-transition)}.video-form-header .close-btn:hover{background:var(--video-danger);color:#fff}.video-form-body{padding:24px}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:var(--video-gray-700);font-size:14px}.form-group .required{color:var(--video-danger)}.form-group input[type=text],.form-group input[type=url],.form-group textarea{width:100%;padding:12px 16px;border:2px solid var(--video-gray-200);border-radius:var(--video-radius);font-size:14px;transition:var(--video-transition)}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:var(--video-primary)}.form-group input.error,.form-group textarea.error{border-color:var(--video-danger)}.error-text{color:var(--video-danger);font-size:12px;margin-top:4px;display:block}.video-type-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.type-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px;background:var(--video-gray-50);border:2px solid var(--video-gray-200);border-radius:var(--video-radius);cursor:pointer;transition:var(--video-transition);font-size:12px;font-weight:500;color:var(--video-gray-600)}.type-btn svg{font-size:20px}.type-btn:hover{border-color:var(--video-primary-light);background:#fff}.type-btn.active{border-color:var(--video-primary);background:#fff;color:var(--video-primary)}.file-upload-area{position:relative;border:2px dashed var(--video-gray-300);border-radius:var(--video-radius);padding:32px;text-align:center;transition:var(--video-transition);cursor:pointer}.file-upload-area:hover{border-color:var(--video-primary);background:var(--video-gray-50)}.file-upload-area.small{padding:16px}.file-upload-area input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}.file-upload-label{display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer}.file-upload-label svg{font-size:32px;color:var(--video-primary)}.file-upload-label span{font-weight:500;color:var(--video-gray-700)}.file-upload-label small{color:var(--video-gray-400)}.checkbox-label{display:flex;align-items:center;gap:10px;cursor:pointer}.checkbox-label input[type=checkbox]{width:18px;height:18px;accent-color:var(--video-primary)}.video-form-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--video-gray-100)}.btn-cancel{padding:12px 24px;background:var(--video-gray-100);border:none;border-radius:var(--video-radius);font-weight:500;color:var(--video-gray-600);cursor:pointer;transition:var(--video-transition)}.btn-cancel:hover{background:var(--video-gray-200)}.btn-save{display:flex;align-items:center;gap:8px;padding:12px 24px;background:var(--video-primary);border:none;border-radius:var(--video-radius);font-weight:500;color:#fff;cursor:pointer;transition:var(--video-transition)}.btn-save:hover{background:var(--video-primary-dark)}.btn-save:disabled{opacity:.7;cursor:not-allowed}@media(max-width:768px){.videos-page{padding:16px}.videos-header{padding:20px}.header-content{flex-direction:column;text-align:center}.header-title{flex-direction:column}.btn-add-video{width:100%;justify-content:center}.videos-filters{flex-direction:column;align-items:stretch}.search-box{max-width:none}.results-info{text-align:center;margin-left:0}.videos-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}.video-type-selector{grid-template-columns:repeat(2,1fr)}.videos-pagination{flex-direction:column}.video-modal-content{max-height:95vh}.video-modal-header{flex-direction:column;gap:12px;text-align:center}}@media(max-width:480px){.videos-grid{grid-template-columns:1fr}.video-actions{justify-content:space-between}.btn-action{flex:1}}