:root{--primary-color: #667eea;--secondary-color: #764ba2;--bg-dark: #0a0a0a;--bg-card: #1a1a1a;--bg-input: #2a2a2a;--text-light: #ffffff;--text-muted: #888;--success-color: #4ade80;--error-color: #ef4444}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{background-color:#0a0a0f;background-image:linear-gradient(145deg,#0a0a0f,#12121a,#1a1a2e 60%,#0f0f1a);background-attachment:fixed}html,body{overscroll-behavior:none}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:transparent;color:var(--text-light)}.mobile-app{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:linear-gradient(145deg,#0a0a0f,#12121a,#1a1a2e 60%,#0f0f1a)}.loading-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.loading-spinner{width:48px;height:48px;border:3px solid rgba(255,255,255,.1);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.login-screen{flex:1;display:flex;align-items:center;justify-content:center;padding:1.5rem}.login-container{width:100%;max-width:320px;text-align:center}.login-logo{height:48px;width:auto;margin-bottom:1rem}.login-title{font-size:1.25rem;font-weight:600;color:var(--text-light);margin-bottom:2rem;letter-spacing:.02em}.login-container form{display:flex;flex-direction:column;gap:1rem}.login-container input{width:100%;padding:1rem;border:none;border-radius:12px;background:var(--bg-input);color:var(--text-light);font-size:1rem}.login-container input::placeholder{color:var(--text-muted)}.login-container input:focus{outline:2px solid var(--primary-color)}.login-container button{width:100%;padding:1rem;border:none;border-radius:12px;background:linear-gradient(135deg,var(--primary-color),var(--secondary-color));color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,opacity .2s}.login-container button:active{transform:scale(.98);opacity:.9}.login-error{color:var(--error-color);font-size:.875rem}.mobile-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;padding-top:max(1rem,env(safe-area-inset-top));background:#00000080;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:sticky;top:0;z-index:100;border-bottom:1px solid rgba(255,255,255,.1)}.mobile-header h1{font-size:1.25rem;font-weight:700;color:var(--text-light)}.header-logo{height:32px;width:auto}.status-badge{font-size:.75rem;padding:.25rem .75rem;background:#ffffff1a;border-radius:100px;color:var(--text-muted)}.mobile-main{flex:1;padding:1rem;padding-bottom:max(1rem,env(safe-area-inset-bottom))}.video-list{display:flex;flex-direction:column;gap:.75rem}.video-list-item{background:#1a1a1ad9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:none;border-radius:16px;padding:0;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;overflow:hidden;display:flex;flex-direction:row;align-items:center;text-align:left;border:2px solid rgba(255,255,255,.1);color:var(--text-light);font-family:inherit;width:100%}.video-list-item:active{transform:scale(.98)}.video-list-item.playing{border-color:var(--success-color);box-shadow:0 0 20px #4ade8033}.video-list-item .video-thumbnail{width:72px;height:72px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#ffffff0d;overflow:hidden;margin:.5rem;border-radius:12px}.video-list-item .thumbnail-image{width:100%;height:100%;object-fit:cover;border-radius:12px}.video-list-item .thumbnail-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;color:#ffffff4d;background:linear-gradient(135deg,#667eea33,#764ba233);border-radius:12px}.video-list-item .video-info{flex:1;padding:.75rem 1rem .75rem .5rem;min-width:0}.video-list-item .video-title{font-size:1rem;font-weight:600;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text-light)}.now-playing-badge{display:inline-block;font-size:.75rem;font-weight:500;color:var(--success-color);padding:.125rem .5rem;background:#4ade8026;border-radius:100px}.error-banner{display:flex;align-items:center;justify-content:space-between;padding:1rem;margin-bottom:1rem;background:#ef444426;border:1px solid rgba(239,68,68,.3);border-radius:12px;color:var(--error-color)}.error-banner p{font-weight:500}.retry-button{padding:.5rem 1rem;border:none;border-radius:8px;background:var(--error-color);color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:opacity .2s}.retry-button:active{opacity:.8}.empty-state{text-align:center;padding:3rem 1rem;color:var(--text-muted)}.empty-state p{margin-bottom:.5rem}.empty-hint{font-size:.875rem;opacity:.7}.detail-view{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000f2}.detail-overlay{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.5rem;padding-top:max(1.5rem,env(safe-area-inset-top));padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}.back-button{position:absolute;top:max(1rem,env(safe-area-inset-top));left:1rem;width:44px;height:44px;border:none;border-radius:50%;background:#ffffff1a;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}.back-button:active{background:#fff3}.back-button svg{width:24px;height:24px}.detail-content{text-align:center;max-width:300px;animation:fadeInUp .3s ease}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.detail-thumbnail{width:200px;height:200px;margin:0 auto 1.5rem;border-radius:20px;overflow:hidden;box-shadow:0 20px 60px #00000080}.detail-thumbnail-image{width:100%;height:100%;object-fit:cover}.detail-thumbnail-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:4rem;font-weight:700;color:#fff3;background:var(--bg-card)}.detail-title{font-size:1.5rem;font-weight:600;margin-bottom:.5rem;color:var(--text-light)}.playing-status{color:var(--success-color);font-size:.875rem;font-weight:500}@media (min-width: 480px){.video-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width: 768px){.video-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem}.mobile-main{padding:1.5rem}.video-card{border-radius:20px}.video-title{font-size:1rem}}