@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap";@layer reset{*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none}body{-webkit-font-smoothing:antialiased;text-rendering:optimizespeed;min-block-size:100dvh;line-height:1.5}img,picture,video,canvas,svg{block-size:auto;max-inline-size:100%;display:block}input,button,textarea,select{font:inherit;color:inherit;background:0 0;border:none}button{cursor:pointer}a{color:inherit;text-decoration:none}ul,ol{list-style:none}}@layer base{:root{--font-sans:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--header-height:70px;--sidebar-width-expanded:240px;--sidebar-width-collapsed:72px;--ease-out-expo:cubic-bezier(.16, 1, .3, 1);--transition-slow:.5s var(--ease-out-expo);--transition-normal:.3s var(--ease-out-expo);--transition-fast:.15s ease;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem}body{font-family:var(--font-sans);background-color:var(--color-bg);color:var(--color-text);transition:background-color var(--transition-normal), color var(--transition-normal);overflow-x:hidden}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-scrollbar);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--color-scrollbar-hover)}:focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}}@layer theme{:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--color-primary:#ff2d55;--color-primary-hover:#e02447;--color-primary-rgb:255, 45, 85;--color-bg-light:#fafafa;--color-surface-light:#fff;--color-surface-hover-light:#f2f2f2;--color-border-light:#e5e5e5;--color-text-light:#0f0f0f;--color-text-subtle-light:#606060;--color-scrollbar-light:#ccc;--color-scrollbar-hover-light:#999;--color-glass-bg-light:#ffffffbf;--color-glass-border-light:#00000014;--shadow-soft-light:0 4px 30px #00000008, 0 1px 3px #00000005;--shadow-premium-light:0 10px 30px #00000014, 0 1px 8px #0000000a;--color-bg-dark:#09090b;--color-surface-dark:#121215;--color-surface-hover-dark:#1f1f23;--color-border-dark:#27272a;--color-text-dark:#f4f4f5;--color-text-subtle-dark:#a1a1aa;--color-scrollbar-dark:#3f3f46;--color-scrollbar-hover-dark:#52525b;--color-glass-bg-dark:#121215bf;--color-glass-border-dark:#ffffff0d;--shadow-soft-dark:0 4px 30px #0003, 0 1px 3px #0000001a;--shadow-premium-dark:0 15px 40px #0006, 0 1px 10px #0003}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root,:root.light{--color-bg:var(--color-bg-light);--color-surface:var(--color-surface-light);--color-surface-hover:var(--color-surface-hover-light);--color-border:var(--color-border-light);--color-text:var(--color-text-light);--color-text-subtle:var(--color-text-subtle-light);--color-scrollbar:var(--color-scrollbar-light);--color-scrollbar-hover:var(--color-scrollbar-hover-light);--color-glass-bg:var(--color-glass-bg-light);--color-glass-border:var(--color-glass-border-light);--shadow-soft:var(--shadow-soft-light);--shadow-premium:var(--shadow-premium-light)}:root.dark{--color-bg:var(--color-bg-dark);--color-surface:var(--color-surface-dark);--color-surface-hover:var(--color-surface-hover-dark);--color-border:var(--color-border-dark);--color-text:var(--color-text-dark);--color-text-subtle:var(--color-text-subtle-dark);--color-scrollbar:var(--color-scrollbar-dark);--color-scrollbar-hover:var(--color-scrollbar-hover-dark);--color-glass-bg:var(--color-glass-bg-dark);--color-glass-border:var(--color-glass-border-dark);--shadow-soft:var(--shadow-soft-dark);--shadow-premium:var(--shadow-premium-dark)}}@layer components{.app-container{grid-template-rows:var(--header-height) 1fr;grid-template-columns:1fr;grid-template-areas:"header""main";min-block-size:100dvh;display:grid}.app-header{z-index:100;padding-inline:var(--spacing-lg);background-color:var(--color-surface);border-bottom:1px solid var(--color-border);transition:background-color var(--transition-normal), border-color var(--transition-normal);grid-area:header;justify-content:space-between;align-items:center;display:flex;position:sticky;top:0}.header-left{align-items:center;gap:var(--spacing-md);display:flex}.logo{align-items:center;gap:var(--spacing-xs);letter-spacing:-.5px;color:var(--color-text);font-size:1.35rem;font-weight:700;display:flex}.logo-icon{color:var(--color-primary);display:inline-flex}.header-center{margin-inline:var(--spacing-md);flex:0 500px}.search-form{background-color:var(--color-surface);border:1px solid var(--color-border);padding-inline:var(--spacing-md) var(--spacing-sm);box-shadow:var(--shadow-soft);transition:background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);border-radius:100px;align-items:center;display:flex;overflow:hidden}.search-form:focus-within{background-color:var(--color-bg);border-color:var(--color-primary);box-shadow:0 0 0 4px rgba(var(--color-primary-rgb), .12)}.search-icon-left{color:var(--color-text-subtle);transition:color var(--transition-normal), transform var(--transition-normal);margin-inline-end:var(--spacing-sm);display:inline-flex}.search-form:focus-within .search-icon-left{color:var(--color-primary);transform:scale(1.05)}.search-input{color:var(--color-text);background:0 0;border:none;outline:none;flex:1;padding-block:10px;font-size:.95rem}.search-input::placeholder{color:var(--color-text-subtle);opacity:.8}.search-clear-btn{padding:var(--spacing-xs);color:var(--color-text-subtle);transition:background-color var(--transition-fast), color var(--transition-fast);border-radius:50%;place-items:center;display:none}.search-clear-btn.visible{display:grid}.search-clear-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text)}.header-right{align-items:center;gap:var(--spacing-md);display:flex}.icon-btn{width:40px;height:40px;color:var(--color-text);transition:background-color var(--transition-fast), transform var(--transition-fast);border-radius:50%;place-items:center;display:grid;position:relative}.icon-btn:hover{background-color:var(--color-surface-hover);transform:translateY(-1px)}.icon-btn:active{transform:translateY(0)}.theme-toggle-icon{transition:transform var(--transition-slow)}.icon-btn:hover .theme-toggle-icon{transform:rotate(25deg)}.app-main{padding:var(--spacing-lg);background-color:var(--color-bg);transition:background-color var(--transition-normal);flex-direction:column;grid-area:main;display:flex;overflow-y:auto}.video-grid{gap:var(--spacing-xl);flex-grow:1;grid-template-columns:repeat(auto-fill,minmax(min(100%,380px),1fr));align-content:start;display:grid}.video-card{gap:var(--spacing-sm);background-color:var(--color-surface);border:1px solid var(--color-border);padding:var(--spacing-sm);box-shadow:var(--shadow-soft);cursor:pointer;color:inherit;transition:transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);border-radius:16px;flex-direction:column;text-decoration:none;display:flex;position:relative;overflow:hidden}.video-card:hover{box-shadow:var(--shadow-premium);border-color:rgba(var(--color-primary-rgb), .2);transform:translateY(-4px)}.thumbnail-container{aspect-ratio:16/9;background-color:#000;border-radius:10px;position:relative;overflow:hidden}.video-thumbnail{object-fit:cover;width:100%;height:100%;transition:transform var(--transition-slow)}.video-card:hover .video-thumbnail{transform:scale(1.05)}.video-play-overlay{opacity:0;-webkit-backdrop-filter:blur(2px);transition:opacity var(--transition-normal);background-color:#0006;place-items:center;display:grid;position:absolute;inset:0}.video-card:hover .video-play-overlay{opacity:1}.play-icon-circle{background-color:var(--color-primary);color:#fff;width:80px;height:80px;box-shadow:0 8px 24px rgba(var(--color-primary-rgb), .45);transition:transform var(--transition-normal), box-shadow var(--transition-normal);border-radius:50%;place-items:center;display:grid;transform:scale(.8)}.play-icon-circle i,.play-icon-circle svg{width:36px;height:36px}.video-card:hover .play-icon-circle{box-shadow:0 12px 30px rgba(var(--color-primary-rgb), .6);transform:scale(1.15)}.card-details{padding-inline:var(--spacing-xs);padding-block-end:var(--spacing-xs);display:flex}.card-text{flex:1;min-width:0}.video-title{text-align:center;margin-block-start:var(--spacing-xs);margin-bottom:var(--spacing-xs);color:var(--color-text);text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:1.3rem;font-weight:750;line-height:1.45;display:-webkit-box;overflow:hidden}.sort-wrapper{background-color:var(--color-bg);border:1px solid var(--color-border);margin-right:var(--spacing-sm);border-radius:100px;align-items:center;gap:4px;padding:3px;display:flex}.sort-label{color:var(--color-text-subtle);padding-inline:var(--spacing-sm) var(--spacing-xs);text-transform:uppercase;letter-spacing:.5px;font-size:.75rem;font-weight:700}.sort-btn{color:var(--color-text-subtle);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:100px;align-items:center;gap:6px;padding:6px 12px;font-family:inherit;font-size:.8rem;font-weight:600;display:flex}.sort-btn i{width:14px;height:14px}.sort-btn:hover{color:var(--color-text);background-color:var(--color-surface-hover)}.sort-btn.active{color:var(--color-text);background-color:var(--color-surface);box-shadow:var(--shadow-soft)}@media (width<=680px){.sort-label{display:none}}@media (width<=480px){.sort-btn-text{display:none}.sort-btn{justify-content:center;gap:0;min-width:32px;min-height:32px;padding:8px}.sort-wrapper{gap:6px;margin-right:4px}}.skeleton-card{background-color:var(--color-surface);border:1px solid var(--color-border);padding:var(--spacing-sm);box-shadow:var(--shadow-soft);border-radius:16px;overflow:hidden}.skeleton-thumbnail{aspect-ratio:16/9;background:linear-gradient(90deg, var(--color-surface-hover) 25%, var(--color-border) 50%, var(--color-surface-hover) 75%);margin-bottom:var(--spacing-sm);background-size:200% 100%;border-radius:10px;animation:1.5s infinite shimmer}.skeleton-line{background:linear-gradient(90deg, var(--color-surface-hover) 25%, var(--color-border) 50%, var(--color-surface-hover) 75%);background-size:200% 100%;border-radius:4px;height:12px;margin-bottom:8px;animation:1.5s infinite shimmer}.empty-state-reset-btn{background-color:var(--color-primary);color:#fff;cursor:pointer;box-shadow:0 4px 12px rgba(var(--color-primary-rgb), .2);margin-top:var(--spacing-md);transition:background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);border:none;border-radius:100px;justify-content:center;align-items:center;padding:10px 20px;font-family:inherit;font-size:.95rem;font-weight:700;display:inline-flex}.empty-state-reset-btn:hover{background-color:var(--color-primary-hover);box-shadow:0 6px 16px rgba(var(--color-primary-rgb), .35);transform:translateY(-1px)}.empty-state-reset-btn:active{transform:translateY(0)}.skeleton-title-1{width:90%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.admin-add-btn{color:var(--color-primary);border:1px solid var(--color-primary);cursor:pointer;transition:all var(--transition-fast);margin-right:var(--spacing-sm);background-color:#0000;border-radius:100px;justify-content:center;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:.85rem;font-weight:700;display:inline-flex}.admin-add-btn:hover{background-color:var(--color-primary);color:#fff;box-shadow:0 4px 12px rgba(var(--color-primary-rgb), .25);transform:translateY(-1px)}.admin-add-btn:active{transform:translateY(0)}.admin-add-btn i{width:14px;height:14px}.admin-modal{border:1px solid var(--color-border);background-color:var(--color-surface);color:var(--color-text);padding:var(--spacing-xl);width:calc(100% - 32px);max-width:500px;box-shadow:var(--shadow-premium);opacity:0;transition:opacity var(--transition-normal) allow-discrete, transform var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;border-radius:20px;margin:0;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)scale(.95)}.admin-modal[open]{opacity:1;transform:translate(-50%,-50%)scale(1)}@starting-style{.admin-modal[open]{opacity:0;transform:translate(-50%,-50%)scale(.95)}}.admin-modal::backdrop{-webkit-backdrop-filter:blur(8px);opacity:0;transition:opacity var(--transition-normal) allow-discrete, overlay var(--transition-normal) allow-discrete;background-color:#0006}.admin-modal[open]::backdrop{opacity:1}@starting-style{.admin-modal[open]::backdrop{opacity:0}}.admin-modal-header{margin-bottom:var(--spacing-md);justify-content:space-between;align-items:center;display:flex}.admin-modal-title{color:var(--color-text);margin:0;font-size:1.4rem;font-weight:800}.admin-modal-close-btn{color:var(--color-text-subtle);cursor:pointer;transition:all var(--transition-fast);background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;padding:4px;display:flex}.admin-modal-close-btn:hover{background-color:var(--color-surface-hover);color:var(--color-text)}.admin-modal-close-btn i{width:20px;height:20px}.admin-modal-body{margin-bottom:var(--spacing-lg)}.admin-modal-description{color:var(--color-text-subtle);margin-bottom:var(--spacing-md);font-size:.9rem;line-height:1.5}.admin-form-group{flex-direction:column;gap:6px;display:flex}.admin-form-label{color:var(--color-text);text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;font-weight:700}.admin-form-input{background-color:var(--color-bg);border:1px solid var(--color-border);color:var(--color-text);box-sizing:border-box;width:100%;transition:all var(--transition-fast);border-radius:10px;padding:12px 16px;font-family:inherit;font-size:.95rem}.admin-form-input:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px rgba(var(--color-primary-rgb), .15);outline:none}.admin-modal-footer{justify-content:flex-end;gap:var(--spacing-sm);display:flex}.admin-btn-secondary{border:1px solid var(--color-border);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast);background-color:#0000;border-radius:100px;padding:10px 20px;font-family:inherit;font-size:.9rem;font-weight:700}.admin-btn-secondary:hover{background-color:var(--color-surface-hover);border-color:var(--color-text-subtle)}.admin-btn-primary{background-color:var(--color-primary);color:#fff;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 12px rgba(var(--color-primary-rgb), .2);border:none;border-radius:100px;justify-content:center;align-items:center;gap:8px;padding:10px 24px;font-family:inherit;font-size:.9rem;font-weight:700;display:inline-flex}.admin-btn-primary:hover{background-color:var(--color-primary-hover);box-shadow:0 6px 16px rgba(var(--color-primary-rgb), .35);transform:translateY(-1px)}.admin-btn-primary:active{transform:translateY(0)}.admin-btn-primary:disabled{opacity:.6;cursor:not-allowed;box-shadow:none;transform:none}.admin-status-message{margin-top:var(--spacing-sm);border-radius:10px;align-items:flex-start;gap:10px;padding:12px 16px;font-size:.9rem;line-height:1.4;display:flex}.admin-status-message i{flex-shrink:0;width:16px;height:16px;margin-top:2px}.admin-status-loading{background-color:rgba(var(--color-primary-rgb), .05);border:1px solid rgba(var(--color-primary-rgb), .15);color:var(--color-text)}.admin-status-success{color:#2ecc71;background-color:#2ecc711a;border:1px solid #2ecc7133}.admin-status-error{color:#e74c3c;background-color:#e74c3c1a;border:1px solid #e74c3c33}.admin-spinner{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (width<=480px){.admin-add-btn span{display:none}.admin-add-btn{gap:0;margin-right:4px;padding:8px}}.search-suggestions{background:var(--color-surface);border:1px solid var(--color-border);box-shadow:var(--shadow-premium);z-index:100;-webkit-backdrop-filter:blur(10px);border-radius:12px;display:none;position:absolute;top:calc(100% + 8px);left:0;right:0;overflow:hidden}.search-suggestions.visible{display:block}.suggestion-item{cursor:pointer;color:var(--color-text);text-align:left;padding:10px 16px;font-size:.9rem;transition:background .15s}.suggestion-item:hover,.suggestion-item.selected{background-color:var(--color-surface-hover)}.watched-badge{color:#4ade80;z-index:5;-webkit-backdrop-filter:blur(4px);background:#000000b3;border:1px solid #ffffff26;border-radius:6px;align-items:center;gap:4px;padding:4px 8px;font-size:.7rem;font-weight:700;display:flex;position:absolute;top:8px;left:8px}.watched-badge.favorite{color:#fff;background:#f43f5ee6;border-color:#f43f5e66;box-shadow:0 2px 8px #f43f5e4d}.surprise-btn{background-color:var(--color-primary);color:#fff;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 4px 12px rgba(var(--color-primary-rgb), .15);border:1px solid #0000;border-radius:100px;justify-content:center;align-items:center;gap:6px;padding:8px 16px;font-family:inherit;font-size:.85rem;font-weight:700;display:inline-flex}.surprise-btn:hover{background-color:var(--color-primary-hover);box-shadow:0 6px 16px rgba(var(--color-primary-rgb), .3);transform:translateY(-1px)}.surprise-btn:active{transform:translateY(0)}.surprise-btn i,.surprise-btn svg{width:16px;height:16px}@media (width<=480px){.surprise-btn span{display:none}.surprise-btn{gap:0;padding:8px}}.player-overlay{z-index:9999;opacity:0;transition:opacity var(--transition-normal);background-color:#000;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.player-overlay.visible{opacity:1;display:flex}.player-close-btn{color:#fff;cursor:pointer;width:44px;height:44px;transition:all var(--transition-fast);z-index:10000;background-color:#00000080;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex;position:absolute;top:24px;right:24px;box-shadow:0 4px 12px #00000080}.player-close-btn:hover{background-color:#000c;transform:scale(1.08)}.player-close-btn:active{transform:scale(.95)}.player-close-btn i,.player-close-btn svg{width:20px;height:20px}.player-iframe-container{background-color:#000;width:100%;height:100%;overflow:hidden}.player-iframe-container iframe{border:none;width:100%;height:100%}@media (width<=768px){.player-close-btn{width:40px;height:40px;top:16px;right:16px}}}@layer utilities;@media (width<=768px){.app-container{grid-template-columns:1fr;grid-template-areas:"header""main"}.app-main{padding-inline:var(--spacing-md)}.logo span{display:none}.header-right{gap:var(--spacing-sm)}.header-center{margin-inline:var(--spacing-xs);flex:1}}