@charset "UTF-8";body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f9f9f9}.main-container{max-width:900px;margin:20px auto;padding:20px}h1{text-align:center;color:#333}.section{background:#fff;padding:20px;margin-bottom:25px;border-radius:8px;box-shadow:0 2px 6px #0000001a}button,input[type=file]{padding:10px 16px;font-size:16px;margin:5px 0}button{background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer;transition:background-color .2s}button:hover{background:#0056b3}table{width:100%;border-collapse:collapse;margin-top:15px}th,td{border:1px solid #ddd;padding:10px;text-align:left}th{background-color:#f2f2f2}.message{margin-top:10px;padding:10px;border-radius:4px}.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}.loading{color:#007bff}.video-list{margin-top:15px}.video-item{background:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;padding:15px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}.video-info{flex-grow:1}.video-name{font-weight:700;margin-bottom:5px}.video-meta{font-size:14px;color:#6c757d}.video-actions{display:flex;gap:10px}.video-actions button{padding:6px 12px;font-size:14px}.btn-view{background:#28a745}.btn-delete{background:#dc3545}.btn-view:hover{background:#218838}.btn-delete:hover{background:#c82333}.video-player{max-width:100%;max-height:400px;margin:10px 0}.no-videos{text-align:center;color:#6c757d;font-style:italic;padding:20px}.video-popup{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:10000;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}.video-popup-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000000d9;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.video-popup-content{position:relative;background:#fff;border-radius:16px;width:90%;max-width:1000px;max-height:90vh;overflow:hidden;box-shadow:0 25px 80px #0006;animation:popupAppear .3s ease-out;display:flex;flex-direction:column}@keyframes popupAppear{0%{opacity:0;transform:scale(.9) translateY(30px)}to{opacity:1;transform:scale(1) translateY(0)}}.video-popup-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;background:#f8f9fa;border-bottom:1px solid #e9ecef;flex-shrink:0}.video-popup-header h3{margin:0 16px 0 0;font-size:18px;color:#2d3748;font-weight:600;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:#6c757d;padding:6px 10px;border-radius:6px;transition:all .2s;flex-shrink:0;line-height:1;width:40px;height:40px;display:flex;align-items:center;justify-content:center}.close-btn:hover{background:#e9ecef;color:#495057;transform:scale(1.1)}.video-container{position:relative;background:#000;flex:1;display:flex;align-items:center;justify-content:center;min-height:300px}.video-container video{width:100%;height:auto;max-height:calc(90vh - 140px);display:block;outline:none}.video-loading,.video-error{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:16px;text-align:center;background:#000c;padding:16px 24px;border-radius:10px;z-index:10}.video-error{color:#ff6b6b;background:#000000e6}.video-info{padding:16px 24px;background:#f8f9fa;border-top:1px solid #e9ecef;flex-shrink:0}.video-stats{display:flex;justify-content:space-between;font-size:14px;color:#6c757d;flex-wrap:wrap;gap:12px}.video-stats span{display:flex;align-items:center;gap:6px}@media (max-width: 768px){.main-container{padding:15px;margin:10px auto}.video-popup{padding:10px}.video-popup-content{width:95%;border-radius:12px}.video-popup-header{padding:14px 16px}.video-popup-header h3{font-size:16px}.video-info{padding:12px 16px}.video-stats{flex-direction:column;gap:8px;font-size:13px}.close-btn{width:36px;height:36px;font-size:24px}.section{padding:15px;margin-bottom:20px}}@media (max-width: 480px){.main-container{padding:10px;margin:5px auto}.video-popup-content{width:98%;max-height:85vh}.video-container video{max-height:calc(85vh - 120px)}.video-item{flex-direction:column;align-items:flex-start;gap:10px}.video-actions{align-self:flex-end}}.video-popup-content:focus{outline:2px solid #007bff;outline-offset:2px}body.popup-open{overflow:hidden}