body{font-family:Arial,sans-serif;background-color:#f0f0f0;margin:0 auto}*{box-sizing:border-box}p{color:#555;line-height:1.6}h2{color:#333}ul{list-style-type:none;padding:0}li{background-color:#fff;border:1px solid #ddd;margin:10px 0;padding:10px;border-radius:4px}.video-list-container{max-width:1200px;margin:0 auto;padding:20px}.video-list-title{font-size:24px;font-weight:700;text-align:center;margin-bottom:20px}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}.video-title{margin-top:10px;font-size:16px;font-weight:600;color:#333}.input-field{padding:15px 10px;width:100%;background-color:#f0f0f0;color:#000;border-radius:5px;border:1px solid #c3c3c3;margin:10px 0}.input-field:focus{outline:none;border-color:#f60}label{font-weight:bolder}.principal-button{width:100%;background-color:#55aefc;color:#00182a;font-size:16px;padding:15px 20px;border:none;border-radius:5px;cursor:pointer}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--color-white: #ffffff;--color-primary: #052659;--color-secondary: #b4c8e2;--color-letter-white: #ffffff;--color-primary-hover: #1565c0;--color-accent: #ff4444;--color-success: #4caf50;--color-warning: #ff9800;--color-error: #f44336;--color-bg-primary: #050505;--color-bg-secondary: #14151a;--color-bg-overlay: rgba(0, 0, 0, .6);--color-bg-tooltip: rgba(0, 0, 0, .9);--color-text-primary: #ffffff;--color-text-secondary: #d1d5db;--color-text-disabled: #6b7280;--color-control-bg: rgba(255, 255, 255, .12);--color-control-bg-hover: rgba(255, 255, 255, .24);--color-control-border: rgba(255, 255, 255, .25);--space-xs: 4px;--space-sm: 8px;--space-md: 12px;--space-lg: 16px;--space-xl: 24px;--space-xxl: 32px;--font-family: "Space Grotesk", "Segoe UI", Tahoma, sans-serif;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--control-height-sm: 32px;--control-height-md: 40px;--control-height-lg: 48px;--seekbar-height: 6px;--seekbar-height-hover: 8px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 10px;--radius-full: 999px;--transition-fast: .15s ease;--transition-normal: .2s ease;--transition-slow: .3s ease;--z-controls: 10;--z-overlay: 20;--z-tooltip: 30;--z-modal: 40}html{overflow-y:scroll}*{margin:0;padding:0;box-sizing:border-box}body{font-family:system-ui,-apple-system,sans-serif;background-color:#f5f5f5;color:#333}.conainer-dashboard{max-width:1200px;display:grid;margin:0 auto;grid-gap:20px;grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.container{max-width:1200px;margin:0 auto;padding:1rem;display:flex;justify-content:space-between;align-items:center}.header{background-color:#fff;box-shadow:0 1px 3px #0000001a}.header-content{display:flex;justify-content:space-between;align-items:center;padding:1rem}.video-card{width:320px;background-color:#fff;border-radius:1rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:transform .2s ease,box-shadow .2s ease}.video-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.video-thumbnail{position:relative;aspect-ratio:16/9;cursor:pointer}.video-thumbnail img{width:100%;height:100%;object-fit:cover}.video-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#0000004d;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.video-card:hover .video-overlay{opacity:1}.play-icon{color:#fff;width:48px;height:48px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.3))}.video-duration{position:absolute;bottom:.75rem;right:.75rem;background-color:#000000bf;color:#fff;padding:.25rem .5rem;border-radius:.5rem;display:flex;align-items:center;gap:.25rem;font-size:.875rem}.duration-icon{width:14px;height:14px}.video-info{padding:1.25rem}.video-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem}.video-title{font-size:1.125rem;font-weight:600;color:#1f2937;flex:1;margin-right:1rem}.video-description{color:#6b7280;font-size:.875rem;line-height:1.5;margin-bottom:.75rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.video-date{color:#9ca3af;font-size:.75rem}.share-container{position:relative}.share-menu{position:absolute;top:100%;right:0;background-color:#fff;border-radius:.75rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;padding:.5rem;min-width:200px;z-index:10}.video__options{display:flex;gap:.5rem;margin-top:.5rem}.btn-copy{background-color:#d1d1d1;color:#495057}.btn-copy:hover{background-color:#dee2e6}.btn .success{color:#059669}.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:4px;font-size:.875rem;cursor:pointer;border:none;transition:background-color .2s}.delete-option{background-color:#dc3545;color:#fff}.playlist-card{background-color:#fff;border-radius:1rem;overflow:hidden;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;transition:transform .2s ease,box-shadow .2s ease;cursor:pointer}.playlist-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.playlist-thumbnail{position:relative;aspect-ratio:16/9}.playlist-thumbnail img{width:100%;height:100%;object-fit:cover}.playlist-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#0000004d;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s ease}.playlist-card:hover .playlist-overlay{opacity:1}.playlist-count{position:absolute;bottom:.75rem;right:.75rem;background-color:#000000bf;color:#fff;padding:.375rem .75rem;border-radius:.5rem;display:flex;align-items:center;gap:.375rem;font-size:.875rem}.count-icon{width:16px;height:16px}.playlist-info{padding:1.25rem}.playlist-title{font-size:1.25rem;font-weight:600;color:#1f2937;margin-bottom:.5rem}.playlist-description{color:#6b7280;font-size:.875rem;line-height:1.5;margin-bottom:1rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.playlist-preview{display:flex;margin-left:1rem}.preview-thumbnail{width:80px;height:45px;border-radius:.375rem;overflow:hidden;margin-left:-1rem;border:2px solid white;transition:transform .2s ease}.playlist-card:hover .preview-thumbnail{transform:translate(.5rem)}.preview-thumbnail img{width:100%;height:100%;object-fit:cover}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;padding:1rem}@media (max-width: 768px){.grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.header-content{flex-direction:column;gap:1rem;text-align:center}.nav-list{flex-direction:column}.preview-thumbnail{width:60px;height:34px}}.upload-area{border:2px dashed #e5e7eb;border-radius:1rem;padding:2.5rem;text-align:center;margin-bottom:2rem;transition:all .2s ease;background-color:#fff}.upload-area.dragging{border-color:#3b82f6;background-color:#eff6ff}.upload-icon{color:#6b7280;margin-bottom:1.25rem}.upload-title{font-size:1.5rem;font-weight:600;color:#1f2937;margin-bottom:.75rem}.upload-text{color:#6b7280;margin-bottom:1.25rem}.progress-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.progress-fill{height:100%;background-color:#3b82f6;transition:width .3s ease;border-radius:1rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.modal{background-color:#fff;border-radius:1rem;width:90%;max-width:500px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem;border-bottom:1px solid #e5e7eb}.modal-title{font-size:1.25rem;font-weight:600;color:#1f2937}.modal-close{background:none;border:none;color:#6b7280;cursor:pointer;padding:.5rem;border-radius:.5rem;transition:all .2s ease}.modal-close:hover{background-color:#f3f4f6;color:#ef4444}.modal-form{padding:1.25rem}.form-group{margin-bottom:1.25rem}.form-label{display:block;font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.5rem}.form-input,.form-textarea{width:100%;padding:.75rem;border:1px solid #d1d5db;border-radius:.5rem;font-size:.875rem;transition:all .2s ease}.form-input:focus,.form-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem}.playlist-header{margin-bottom:2rem}.back-button{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:none;background:none;color:#6b7280;cursor:pointer;margin-bottom:1rem;border-radius:.5rem;transition:all .2s ease}.back-button:hover{background-color:#f3f4f6;color:#3b82f6}.playlist-hero{display:flex;gap:2rem;padding:2rem;background-color:#fff;border-radius:1rem;box-shadow:0 4px 6px -1px #0000001a}.playlist-hero-image{width:250px;height:140px;object-fit:cover;border-radius:.5rem}.playlist-hero-content{flex:1}.playlist-hero-title{font-size:1.5rem;font-weight:600;color:#1f2937;margin-bottom:.75rem}.playlist-hero-description{color:#6b7280;margin-bottom:1rem;line-height:1.5}.playlist-hero-stats{color:#6b7280;font-size:.875rem}.playlist-actions{margin:2rem 0}.playlist-videos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.playlists-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.playlists-title{display:flex;align-items:center;gap:.5rem}.button{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.25rem;border-radius:.75rem;font-weight:500;transition:all .2s ease;border:none;cursor:pointer}.button-primary{background-color:#3b82f6;color:#fff}.button-primary:hover{background-color:#2563eb}.button-secondary{background-color:#f3f4f6;color:#374151}.button-secondary:hover{background-color:#e5e7eb}@media (max-width: 768px){.playlist-hero{flex-direction:column;padding:1.5rem}.playlist-hero-image{width:100%;height:200px}}.skeleton{position:relative;overflow:hidden;background:#e2e8f0;border-radius:12px}.skeleton:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,#fff0,#fff9,#fff0);transform:translate(-100%);animation:skeleton-shimmer 1.3s ease-in-out infinite}.skeleton-line{height:12px;border-radius:999px}.skeleton-line--sm{width:60%}.skeleton-line--md{width:80%}.skeleton-line--lg{height:16px}.skeleton-circle{width:42px;height:42px;border-radius:50%}.skeleton-media{width:100%;aspect-ratio:16 / 9;border-radius:14px}.skeleton-chip{width:90px;height:24px;border-radius:999px}.skeleton-pill{width:70px;height:22px;border-radius:999px}.skeleton-grid{display:grid;gap:1rem}@keyframes skeleton-shimmer{to{transform:translate(100%)}}@media (prefers-reduced-motion: reduce){.skeleton:after{animation:none}}.PageFallback{max-width:1200px;margin:0 auto;padding:2rem 1.5rem 3rem;display:grid;gap:1.5rem}.PageFallback__hero{display:flex;align-items:center;gap:1rem}.PageFallback__lines{display:grid;gap:.5rem;width:min(420px,100%)}.PageFallback__cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.PageFallback__card{padding:1rem;border-radius:16px;border:1px solid #e2e8f0;background:#fff;box-shadow:0 12px 24px #0f172a14;display:grid;gap:.8rem}.PageFallback__card-lines{display:grid;gap:.5rem}